Invisible ion-icon

I’m trying to add icons in my app but it doesn’t show anything. The icon is included but it’s invisible. I think it has something to do with the css. I tried stylizing ion-icon but didn’t work out.

Does anyone have any idea? Thank you.

What version of the Ionic Framework do you have…
Just note that some of the ionic 4 icons have been renamed in 5

When you inspect you might find the tag empty without its SVG icon
or check the console to see if there are errors like ‘could find icon-name’

1 Like

Thank you for your hint. I’m using Ionic version 5.
I don’t believe it’s a problem with the version of Ionic as I have tried a lot of icons as well as including the svg file…and I get no errors in the console. It seems like the icon is there, it’s just invisible but I have no idea why.

That’s weird. but share a screenshot of the inspected icon element.
or just share a repo to debug


I even tried


ion-icon{
  color:blue !important;
}

But didn’t work either.

That’s what I have


<ion-content :fullscreen="true">
      <p> icon: <ion-icon size="large" color="blue" name="add-circle-outline"></ion-icon></p>
  </ion-content>

I tried z-index, display…

I see…Actually the icon svg is missing…all ion-icon structure looks like this one

be sure your ion-icon has name=“add-circle-outline”

It has that name.

<ion-icon size="large" color="blue" name="add-circle-outline"></ion-icon>

I also tried to include the svg but didn’t work.

Angular, vue, react?

Vue has its specific ways of getting the icon to view. See this forum

1 Like

I’m using Vue. I tried importing everything.

I suspect the problem is here <ion-icon size="large" color="blue" name="add-circle-outline"></ion-icon> it must be a dynamic icon with :icon as the attribute name. Have a look at this answer

1 Like

Thank you but didn’t work either…I will create a new project and test.

Maybe paste the whole code here?

Step 1: Import the icon from import { addCircleOutline } from "ionicons/icons";
Step 2: Add imported icon to setup()

  setup() {
    return {
			addCircleOutline
    };

Step 3: In your html <ion-icon :icon="addCircleOutline" size="large"></ion-icon>

1 Like

Now it worked! Thank you very much. I honestly thought it would be easier.

Told ya …Vue way of doing things :wink:

1 Like

Yeah, you did. Haha. Anyway, I’m enjoying working with Vue.

1 Like