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

Question

我已经按照 Dynamic nested topnav menu 创建了一个导航栏。

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

图标无法显示，但在其子项上运行良好。

 {
  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',
            },
          ],
        },

谢谢奥古斯丁·拉库拉

我已经安装了包，我已经尝试了Angular Material个图标。

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

Answer 1

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

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

Answer 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>

示例中漏掉了一行。

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

TopNav Menu Navigation Example - Icon not shows on first menu

html

css

angular

navigation

icons