Ionic icon v5.3.0 attributes not working properly

Ionic Framework Ionic Vue
1

Hello,
I’m brand new to the process of app-coding so please let me know if I am missing some info :slight_smile:

I’m using the following setup:
framework: Ionic vue 5.5.2
Ionic icons: 5.3.0 (as far as I can determine from the package.json file in the ionicicons folder)

I have started with a simple tabbed app however I have some issues getting the ionic icons working properly. I have included a small sample below. It seems that nothing really happens when I assign the name property but assigning :icon="" works.

<template>
  <ion-page>
    <ion-content>
      <p>
        nothing happens here:
        <ion-icon name="heart"></ion-icon> <br>
        this seems to work:
        <ion-icon :icon="heart"></ion-icon><br>
        Nothing happens here:
        <ion-icon md="heart" ios="triangle"></ion-icon>
        this seems to work:
        <ion-icon :ios="triangle"></ion-icon><br>

        large attribute however works as specified:
        <ion-icon :icon="triangle" size="large"></ion-icon><br>

      </p>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent, IonIcon } from "@ionic/vue";
import { defineComponent } from "vue";
import { heart, triangle } from "ionicons/icons";

export default defineComponent({
  name: "Add",
  components: {
    IonPage,
    IonContent,
    IonIcon,
  },
  setup() {
    return {
      heart,
      triangle,
    };
  },
});
</script>

IonicIcon_issue
IonicIcon_issue428×751 6.94 KB

Best regards
Jonatan

2

because the name property is not supported in vue…
and it seems you answered your question on :ios and :android

So I think you are good to go?

3

Oh okay… So I guess it’s working as intended - I just wasn’t able to find this in the documentation. Thank you for the answer :slight_smile:
Follow-up question: I’ve been trying to set an icon for android only using the :md but it still shows on ios. Is there any way of omitting the icon for ios? I get an “error ‘v-bind’ directives require an attribute” by just setting :ios="" and I’m not really sure if this is then just an issue in vue.

4

@aaronksaunders How can we get this to work in Vue when my icon is fetched from a back-end API? I’m doing a for loop and when I assign the icon like this: :icon="i.icon" this doesn’t work…

5

In my State, I had met your issue and fix it by myself.
My ways just simply open the file name “ionicons/icons”, search the icon I need and copy then using on my work. Just that, I hope my comment will help u out.