TopNav 菜单导航示例 - 图标未显示在第一个菜单上答案

【问题标题】：TopNav Menu Navigation Example - Icon not shows on first menuTopNav 菜单导航示例 - 图标未显示在第一个菜单上
【发布时间】：2021-10-04 05:50:31
【问题描述】：

我已关注Dynamic nested topnav menu 创建导航栏。

在我尝试通过将 DevFestFL 的代码 iconName: 'close' 更改为 iconName: 'arrow_circle_down' 来将图标添加到父菜单之前，它一直运行良好。

图标无法显示，但在其子级上可以正常工作。

 {
  displayName: 'DevFestFL',
  iconName: 'arrow_circle_down',
  children: [
    {
      displayName: 'Speakers',
      iconName: 'arrow_circle_down',
      children: [
        {
          displayName: 'Michael Prentice',
          iconName: 'person',
          route: 'michael-prentice',
          children: [
            {
              displayName: 'Create Enterprise UIs',
              iconName: 'star_rate',
              route: 'material-design',
            },
          ],
        },

谢谢 Agustin L. Lacuara

我已经安装了这个包，我已经尝试过 Angular Material Icons。

displayName: 'Reports',
  iconName: 'arrow_downward',
  children: [
    {
      displayName: 'Content History Report',
      iconName: 'arrow_downward',
      route: 'reports/content-history'
    },
    {
      displayName: 'Drive History Report',
      iconName: 'article',
      route: 'reports/drive-history'
    }
  ]

但是，它只适用于子菜单。

Icon is not working for parents menu

【问题讨论】：

标签： html css angular navigation icons

【解决方案1】：

尝试使用 Angular Material Icons 中的图标。这里有一个备忘单可能会对你有所帮助，它在一些项目中对我有用。

https://jossef.github.io/material-design-icons-iconfont/

【讨论】：

澄清一下：有些图标显示而其他未显示，这可能是在查找图标的位置缺少未显示的图标名称的线索
感谢您的回复，很抱歉不小心编辑了您的帖子。

【解决方案2】：

<!-- Handle branch node buttons here -->
  <span *ngIf="item.children && item.children.length > 0">
    <button
      mat-button
      [matMenuTriggerFor]="menu.childMenu"
      [disabled]="item.disabled"
    >
      {{ item.displayName }}
      <mat-icon>{{ item.iconName }} </mat-icon>
    </button>
    <app-menu-item #menu [items]="item.children"></app-menu-item>
  </span>

示例中遗漏了一行。

【讨论】：