TopNav菜单导航示例：父级菜单图标无法正常显示问题

解决方案 #

你遇到的这个问题90%以上是父级菜单的模板渲染逻辑中没有加入icon字段的渲染代码，和你配置的icon值、依赖安装都没有关系，可按以下步骤排查修复：

1. 定位导航组件的模板文件（通常为*.component.html），找到父菜单节点的渲染代码块。原示例项目默认的父菜单代码只渲染了菜单名称，未绑定iconName字段，示例修改参考如下：
   原代码（类似结构）：

<button mat-button [matMenuTriggerFor]="subMenu">
  {{menuItem.displayName}}
</button>

修改后补充icon渲染逻辑：

<button mat-button [matMenuTriggerFor]="subMenu">
  <mat-icon *ngIf="menuItem.iconName">{{menuItem.iconName}}</mat-icon>
  {{menuItem.displayName}}
</button>

2. 若修改模板后还是不显示，打开浏览器开发者工具（F12）选中父菜单区域，检查对应元素：

• 如果没有生成<mat-icon>标签，检查模板的判断条件是不是误拦截了父菜单的icon渲染，比如写了只有子菜单才渲染icon的判断逻辑
• 如果有<mat-icon>标签但是不可见，检查CSS样式是否给父级的mat-icon设置了display: none、颜色和背景一致、字号为0等隐藏规则，修改对应样式即可

3. 若使用自定义图标字体，检查父菜单的mat-icon元素是否继承了正确的font-family配置，没有的话手动加上对应类名即可。

内容的提问来源于stack exchange，提问作者Shih Liang Fang