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

Question

我已经按照动态嵌套topnav菜单创建了一个导航栏。

它工作得很完美，直到我试图通过更改代码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',
},
],
},

---

谢谢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'
}
]

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

图标不能用于父母菜单

Answer 1

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

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>

示例中少了一行。