CODEWITHSUNDEEP
ionic-frameworkvuejs2ioniconsionic-vue
Moch Diki Widianto
Moch Diki Widianto

Reputation: 142

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

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

enter image description here

Upvotes: 9

Views: 9151

Answers (6)

wobsoriano
wobsoriano

Reputation: 13434

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>

Upvotes: 23

Luk&#225;š Hlad&#237;k
Luk&#225;š Hlad&#237;k

Reputation: 11

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.

Upvotes: 1

509dave16
509dave16

Reputation: 31

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))

Upvotes: 1

Jigesh Raval
Jigesh Raval

Reputation: 303

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

Upvotes: 3

Bram Janssen
Bram Janssen

Reputation: 1307

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>

Upvotes: 3

Aaron Saunders
Aaron Saunders

Reputation: 33335

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>

Upvotes: 2

Related Questions