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':

Did you already find a solution? – Bram Janssen May 01 '20 at 09:19 — Bram Janssen, May 01 '20 at 09:19

wobsoriano · Accepted Answer · 2022-03-03T18:20:41.190

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>

score 3 · Answer 2 · answered May 01 '20 at 09:56

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>

Downgrading the `ionicons` version to `4.x.x` worked for me too! — Manoj Shrestha, Jun 06 '20 at 12:54

score 3 · Answer 3 · answered Jun 19 '20 at 06:09

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

score 2 · Answer 4 · answered Apr 26 '20 at 02:54

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>

509dave16 · Answer 5 · 2020-07-25T17:47:17.800

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 ionicons@5.1.2 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))

Lukáš Hladík · Answer 6 · 2021-03-19T21:11:18.027

1

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.

edited Mar 19 '21 at 21:11

answered Mar 19 '21 at 20:47

Lukáš Hladík

11
2

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

6 Answers6