在 PrimeNg 菜单栏中使用材质图标时的空白图标

Question

我们正在使用 Angular 12。由于材质库有更多的图标，我们有兴趣在 PrimeNg MenuBar 中使用该图标

<p-menubar [model]="menu"></p-menubar>

但是，那些素材图标并没有出现在屏幕上。它只是没有图标的空白。

this.menu = [{
      label: 'Products',
      icon: 'pi pi-fw pi-user-edit',
      items: [{
              label: 'New / Update', icon: 'how_to_reg', routerLink: ['/products']
          },
          {
            label: 'Review', icon: 'task', routerLink: ['/review']
          }]
    }];

有什么建议吗？

已尝试解决方案：

• 添加前缀“ui-icon-”
• 仅使用图标名称

Answer 1

我不确定icon: 'pi pi-fw pi-user-edit',

但要使用 Angular 材质图标：

• 通过ng add @angular/material在项目中安装Angular Material

• 使用
  import {MatIconModule} from '@angular/material/icon';在module.ts中导入MatIconModule

• 在你的menubar 组件中，你可以有类似的东西：

<mat-icon>{{menu.icon}}</mat-icon>

Mat Icon Module的示例和API

• 在父组件中：

this.menu = [{
      label: 'Products',
      icon: 'person',
      items: [{
              label: 'New / Update', icon: 'how_to_reg', routerLink: ['/products']
          },
          {
            label: 'Review', icon: 'task', routerLink: ['/review']
          }]
    }];

这里person是图标的值，可以在这里找到：Angular Material IconsI