Ionic-Vue Ionicons 5.x.x doesn't show icon

Question

I used ionic-vue with ionicons 5.0.1 but after call

<ion-icon name="add"></ion-icon>

i was following https://dev.to/aaronksaunders/build-your-first-ionic-vue-app-18kj and https://github.com/ionic-team/ionic/issues/19078 tutorial, but stucked and icon in FAB cannot be show. This is my syntax, thank you for helping.

<template>
   <ion-page>

        ....

        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
            <ion-fab-button @click="$router.push({ name: 'new-item' })">
                <ion-icon name="add"></ion-icon>
            </ion-fab-button>
        </ion-fab>
        </ion-content>
    </ion-page>
</template>

<script>

...

import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';

const currentIcons = Object.keys(allIcons).map(i => {
  const key = i.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
  if(typeof allIcons[i] === 'string') {
    return {
      [key]: allIcons[i],
    }
  }
  return {
    ['ios-' + key]: allIcons[i].ios,
    ['md-' + key]: allIcons[i].md,
  };
});

const iconsObject = Object.assign({}, ...currentIcons);
addIcons(iconsObject);

...
</script>

Result FAB does not show icon 'add':

Arlenaarlene

Did you already find a solution? – Kuwait

Answer 1

For Ionic Vue 3 using Composition API:

<template>
  <ion-icon :icon="rocket" />
</template>

<script>
import { IonIcon } from '@ionic/vue';
import { rocket } from 'ionicons/icons';

export default {
  components: { IonIcon },
  setup() {
    return {
      rocket
    }
  }
}
</script>

For <script setup>

<script setup>
import { IonIcon } from '@ionic/vue';
import { rocket } from 'ionicons/icons';
</script>

<template>
  <ion-icon :icon="rocket" />
</template>

Updo

Answer 2

I was also following the same guide(https://dev.to/devmount/how-to-use-ionicons-v5-with-vue-js-53g2), and I encountered the same issue.

I decided to downgrade the ionicons version to version 4:

npm i ionicons@4

This solved my issue.

The code that I used from the guide:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Home</ion-title>

      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <ion-list>
        <ion-item>
          <ion-checkbox slot="start"></ion-checkbox>
          <ion-label>
            <h1>Create Ideaa</h1>
            <ion-note>Run Idea by Brandy</ion-note>
          </ion-label>
          <ion-badge color="success" slot="end">5 Days</ion-badge>
        </ion-item>
      </ion-list>
      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button >
          <ion-icon name="add"  ></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ion-content>
  </ion-page>
</template>

 <script>

  import { add } from "ionicons/icons";
  import { addIcons } from "ionicons";
  addIcons({
    "ios-add": add.ios,
    "md-add": add.md
  });

  export default {
    name: "HomePage",
    props: {
      msg: String
    }
  };
</script>

Kuwait

Downgrading the ionicons version to 4.x.x worked for me too! – Sanctum

Answer 3

In your main.js file

import * as allIcons from "ionicons/icons";

Vue.mixin({
  data() {
    return {
      i: allIcons,
    };
  },
  methods: {
    icon(name) {
      return this.i[name];
    }
  }
});

now you can use <ion-icon :src="icon('search')"></ion-icon> anywhere in the vue application, it is going to work

Xeniaxeno

Answer 4

hey thanks for checking out the blogs and videos...

you can also get the icons this way...

<template>
<ion-button @click="handleAddItemClicked" >
  <ion-icon slot="icon-only" :src="i.saveOutline" ></ion-icon>
</ion-button>
      <ion-button @click="handleAddItemClicked" >
  <ion-icon slot="icon-only" :src="i.save" ></ion-icon>
</ion-button>
      <ion-button @click="handleAddItemClicked" >
  <ion-icon slot="icon-only" :src="i.saveSharp" ></ion-icon>
</ion-button>
</template>

<script>
import * as allIcons from "ionicons/icons";

...

  data() {
    return {
      i : allIcons,
    };
  },
</script>

Inshrine

Answer 5

I followed this comment in a closed issue on @modus/ionic-vue repo: https://github.com/ModusCreateOrg/ionic-vue/issues/120#issuecomment-633666592

import { addIcons } from 'ionicons'
import { add, cartOutline } from 'ionicons/icons'
addIcons({ add, "cart-outline": cartOutline })

This worked with [email protected] installed. Note how the multi word icon imports are camel case instead of kebab case. If you want to use the kebab case variant of the name for an ion-icon you have to do the assignment to the kebab case name yourself like in the case of cart-outline above.

Though if you wanted to add all of them at once and support kebab case, you could map a new object like this:

import { addIcons } from 'ionicons'
import * as allIcons from 'ionicons/icons'
import _ from 'lodash'
addIcons(_.mapKeys(allIcons, (value, key) => _.kebabCase(key))

Idyllic

Answer 6

After i tried everything, there weren't any errors reported anywehere, just icon wasn't there.

Please check twice, that you have set the color of the icon, because in default icon style color is inhereit. So, if you have for example, a green button, the color of the icon will be also green, if you do not specify.

Jobe