mat-tree子项mat-icon动态绑定图标无法正常显示问题求助

解决步骤 #

1. 检查基础依赖配置 #

• 确认项目根模块已注册MatIconModule：

// app.module.ts
import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    // 其他项目依赖
    MatIconModule
  ]
})
export class AppModule { }

• 确认全局样式文件已引入Material Icons字体资源：

/* styles.scss / styles.css */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

2. 修正字段绑定错误 #

你当前模板中路由绑定的字段名和TREE_DATA中定义的不匹配，虽不直接影响图标渲染，但会导致路由功能异常：
原错误写法：

<a [routerLink]="[node.ROUTES]" routerLinkActive="link-active" >

修正后写法：

<a [routerLink]="[node.path]" routerLinkActive="link-active" >

3. 优化图标绑定逻辑 #

如果依赖配置无问题，可将图标写法替换为属性绑定提升兼容性：

<mat-icon *ngIf="node.icon" [innerText]="node.icon"></mat-icon>

4. 父节点图标补充（可选） #

如果需要给可展开的父级节点也添加图标，直接在对应节点模板中新增图标渲染逻辑即可：

<!-- 可展开节点的树节点模板 -->
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="20">
  <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
    <mat-icon class="mat-icon-rtl-mirror">
      {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
    </mat-icon>
    <mat-icon *ngIf="node.icon">{{node.icon}}</mat-icon>
    {{node.name}}
  </button>
</mat-tree-node>

完成以上配置后即可正常渲染节点图标，若仍有异常可打开浏览器控制台查看是否有图标名称不存在、模块未注册等报错信息。

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