在innerHTML中使用<mat-icon>不起作用

Question

我正在尝试从组件中显示包含<mat-icon>的字符串，并在呈现它们时遇到问题。常规的HTML元素（如粗体）可以很好地显示，但Mat-icon则不能，后者仅显示名称。知道怎么做吗？

component.cs

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

component.html

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

结果

按cloud_download 下载

Answer 1

将您的代码更改为此，然后重试：

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

您应该使用innerHTML="{{action.content}}"或[innerHTML]="action.content"，但不能使用[innerHTML]="{{action.content}}"或innerHTML={{action.content}}

Answer 2

您可以尝试将span与mat-icon类一起使用。例如：<span class="mat-icon">cloud_download</span>

据我所知，它的渲染效果与Mat-icon并不完全相同，但非常相似，并且可能更适合嵌入文本中

Answer 3

我参加聚会很晚，但是您可以确保以下工作正常进行。 只需将所有其他HTML包装在下面即可。

<mat-icon [innerHTML]="item.icon"></mat-icon>

赞：

<p>Hello, <mat-icon [innerHTML]="item.icon"></mat-icon>!</p>