Angular中innerHTML渲染Material组件（如mat-icon）失败问题求助

你遇到的这个问题其实很常见——Angular的innerHTML只会渲染原生HTML元素，而像<mat-icon>这种Angular组件是不会被Angular的编译器处理和实例化的，所以它只会被当作普通标签，内部的文本直接显示，不会转换成Material图标。下面给你两种可行的解决办法：

方法一：改用原生HTML标签（最简单） #

mat-icon组件最终在页面上会渲染成带有material-icons类的<i>标签，所以你可以直接在后端返回原生的HTML代码，代替Angular组件标签：

后端TS代码修改为：

let markup = "<i class='material-icons'>folder</i>";

前端依然用[innerHTML]渲染：

<div [innerHTML]="html"></div>

注意：确保你的项目已经正确引入了Material Icons字体（一般在index.html里会有类似<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">的引用，如果没有的话需要加上）。

方法二：动态创建mat-icon组件（适合必须用组件的场景） #

如果因为某些原因必须使用mat-icon组件，那不能用innerHTML，得通过Angular的组件动态创建API来实现：

1. 首先，在你的组件模块中，把MatIconModule添加到entryComponents（如果是Angular 9+，这一步可以省略，因为 Ivy 编译器支持自动检测）：

import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
// ...其他导入

@NgModule({
  imports: [MatIconModule],
  entryComponents: [MatIconModule] // Angular 8及以下需要
})
export class YourModule { }

2. 在你的组件类中，注入ComponentFactoryResolver和ViewContainerRef，然后动态创建MatIcon组件：

import { Component, ComponentFactoryResolver, ViewContainerRef, OnInit } from '@angular/core';
import { MatIcon } from '@angular/material/icon';

@Component({
  selector: 'app-your-component',
  template: '<div #iconContainer></div>'
})
export class YourComponent implements OnInit {
  @ViewChild('iconContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit() {
    // 创建MatIcon组件工厂
    const factory = this.resolver.resolveComponentFactory(MatIcon);
    // 创建组件实例
    const iconComponent = this.container.createComponent(factory);
    // 设置组件的属性
    iconComponent.instance.iconName = 'folder';
    // 如果需要设置其他属性，比如color，可以这样：
    // iconComponent.instance.color = 'primary';
  }
}

这样就能正确渲染出mat-icon组件了，因为它是通过Angular的组件生命周期创建的，会被正确编译和实例化。

总结一下，如果你只是需要显示Material图标，第一种方法足够简单高效；如果必须使用mat-icon组件的特性（比如绑定Angular的属性、响应式行为等），就用第二种方法。

内容的提问来源于stack exchange，提问作者Babken