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.
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’
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
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
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
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>
Now it worked! Thank you very much. I honestly thought it would be easier.
Told ya …Vue way of doing things
Yeah, you did. Haha. Anyway, I’m enjoying working with Vue.