Using <mat-icon> in innerHTML does not work

Question

I am trying to display strings containing <mat-icon> from my component, and having problem rendering them. The regular HTML elements, like bold, show fine, but not the mat-icon, which only shows the name. Any idea how to do it?

component.cs

this.info = "Press <mat-icon>cloud_download</mat-icon> <b>Download</b> button."

component.html

<p innerHTML={{info}}>{{info}}</p>

Result

Press cloud_download Download

Answer 1

You could try using a span with the material-icons class. Eg: <span class="material-icons">cloud_download</span>

As far as I recall it won't render exactly the same as a mat-icon but quite similar, and probably more suitable for embedding in text

Answer 2

Change your code to this and try again :

<p innerHTML="{{info}}">{{info}}</p>

You should use either innerHTML="{{action.content}}" or [innerHTML]="action.content" but not [innerHTML]="{{action.content}}" or innerHTML={{action.content}}