Ion-icon is not displayed


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:
And no icon is displayed in the page:

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.

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?

1 Like

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

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.

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

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.