Ion-icon is not displayed

Ionic Framework Ionic Vue
1

Hello,

I have a nuxt app using ionic framework where ion-icon does not display the svg img.
The ion-ion element is rendered like this:
image
And no icon is displayed in the page:
image

I have also installed ionicons version 4 and 5 and is not working with either version.

  1. Is there a compatibility problem between ionic framework and ionicons?
  2. Is there need to install the ionicons dep or it should work without it?

I also tried almost every solution from ionic forums and github issues answers.

If someone can help me with this issue, or has any information regarding this topic, I would appreciate it.

3

I never got the vue ion-icon to work with name=. Have you tried the :icon="eyeOutline" (imported from ionicicons/vue)? How are you currently creating the the ion-icon?

2 Likes
4

ionIcon in vue/react require the :icon syntax since they can import the svgs directly. Angular is the only one that can support name

1 Like
5

I have changed to a nuxt typescript project and it works like this.

<ion-icon name="eye-off"></ion-icon>

Didn’t tried on the old one (with javascript) using the :icon attribute.

Thanks for your time and answers.

6

I did everything in the guide but the icon is not displayed. The more the version is updated, the more problems there are.

7

See if my example helps here: topv3/Home.vue at fa5196450f47f52a5335886ab3761a930811e5d0 · dolthead/topv3 · GitHub

I had to import the icon, so look for the imports.

8

Sure would be nice if the ionicon documentation was updated accordingly. Currently it says nothing about this.

1 Like