Can't get <ion-icon> to show a built-in icon in Vue app

Ionic Framework Ionic Vue
1

Basically the <ion-icon> component just doesn’t work with the premade built-in icons from the ionicons library. I can get <ion-icon src="…"> to work correctly when I provide a link to my own SVG file. But the premade icons never show up.

According to the documentation for Ionicons here (Ionicons Usage Guide: Tips for installing and using the Ionicons free icon library), “If you’re using Ionic Framework, Ionicons is packaged by default, so no installation is necessary.” Since I am using the Ionic framework for Vue.JS, I am not doing anything other than following the documentation from that page.

My app is a Vue.JS Ionic app that is being deployed to an Android mobile device via Capacitor. Here is what the Vue component currently looks like. Note I’ve omitted all the <ion-page>, <ion-content>, etc. components for clarity.

FILE NAME:  MyPage.vue

<template>
     ....
    <ion-icon name="menu"></ion-icon>
     ....
</template>

<script lang="ts">
import { menu } from "ionicons/icons"
import { IonIcon } from "@ionic/vue"
export default {
defineComponent({
    components: { IonIcon },
    data: return {
        menu
    }
})
}
</script>

It’s not clear to me if the <ion-icon> tag in the <template> should use “name=” or “:name=” (with dynamic binding). I’ve seen both used in different tutorials. The official Ionicon documentation uses “name=” (without dynamic binding). I’ve tried both combinations and neither work.

I also notice that the official Ionicon documentation does not indicate that you need to import the icon with “import { menu } from ‘ionicons/icons’”, and return the imported object as a data() element. However, various 3rd-party tutorials show this import. I’ve tried with and without the import, and it makes no difference.

I’m obviously missing something very simple here. The documentation over at Ionicons Usage Guide: Tips for installing and using the Ionicons free icon library is extremely simple, yet it just does not work for me. Every other Ionic component works fine in this app, only the premade built-in Ionicon icons do not render. I can even get <ion-icon> component to work, but only if I specify the src="…" attribute and reference my own SVG file. I just can’t get the premade built-in icons to work.

2

This is what I do in Vue.

<IonIcon :icon="menu" />

// Following your casing, it would be
<ion-icon :icon="menu"></ion-icon>
3

Thank you for the reply.
As I mentioned, I definitely tried that since I saw it in an external tutorial, but I still could not get it to work.

Do you also have a line like this somewhere in the *.vue file?

import { menu } from "ionicons/icons"
4

Yes. Sorry, I overlooked how you were returning it for the template. I return it in the setup method even when using the Options API.

So, for you do this. Also, please note the export default defineComponent. Not sure why yours is separated.

<template>
     ....
    <ion-icon :icon="menu"></ion-icon>
     ....
</template>

<script lang="ts">
import { menu } from "ionicons/icons"
import { IonIcon } from "@ionic/vue"

export default defineComponent({
    components: { IonIcon },
    setup() {
        return {
            menu,
        }
    }
})
</script>
1 Like
5

Yes sorry I just mistyped it the “export default defineComponent” piece when I typed it into this editor. It is correct in my actual application.

This advice actually worked! The thing I missed was that I was using <ion-icon :name=“menu”> (as the documentation states), but I really needed to use <ion-icon :icon=“menu”>.

So, the documentation over at Ionicons Usage Guide: Tips for installing and using the Ionicons free icon library is simply inadequate and incorrect. Maybe someone should fix it, so they don’t waste hours of time going down a silly rabbit hole like I did.

Thank you so much for the help!

1 Like