Hi, I am trying to place a string of Ionicons inside my HTMK. I am using [innerHtml]. I pass a sanitized html string that includes a few . The problem is that the ion-icon directive does not render. In the chrome debugger I see that the html code stays .
Can anyone advice about a solution?
Thank,
Yakir, SeeVoov LTD
My advice is “don’t use innerHTML”.
I tried using a component to show the ionicons, also to no success.
It’s going to be tough for anybody to help you unless you post code.
You could try using template strings. See if that works. Although I’m not sure if they work with ionic tags.
If they don’t work with ionic tags, I suggest using a regular image itself. But just make sure the image is the correct dimensions by default because you can’t add styling inside a template string.
The code goes something like that:
TS:
public ionicons: string = '<ion-icon name="help"></ion-icon>';
Template:
<div id="ionicons" [innerHtml]="ionicons"></div>
That’s not what I meant. I meant "post enough code that people can help you find alternatives to innerHTML", because innerHTML is virtually never the right approach.
First of all, that isn’t a template string. It’s a regular string and it will thus get rendered like one. A template string uses back ticks like this —> `
So you could see what happens when you replace the normal single quotes with back ticks. (Again I’m not sure if template strings work with ion tags)
I still think you should post your code because like @rapropos said there might be a better workaround than innerHTML which is really only used with plain Javascript web applications.
Well, I ended up just using font awesome icons, which solved the problem I had with the ionicons. I didn’t find an alternative to using innerHtml with my pipe. I am using a pipe to show html tags (font awesome icons), and if I try to show the tags in curly brackets, it shows the tags literally: . If there is a proper alternative, I would love to hear about it.
Could you share the snippet of code where you used font awesome icons? Might be useful for my future projects.
For the third time now, nobody can give you any advice until you describe your goal in terms that will allow it.
A few year later… but… for this icon:
<ion-icon name="logo-youtube"></ion-icon>
Do this:
<ion-icon class="icon ion-logo-youtube"></ion-icon>
Please notice the class “icon” and “ion-ICON_NAME” where ICON_NAME is what you would use in the name attribute in the ion-icon tag