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

Question

我们正在使用 Angular 12。由于材料库有更广泛的图标，我们有兴趣在 PrimeNg 菜单栏中使用该图标

<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

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

• 在您的menubar组件中，您可以拥有以下内容：

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

Mat Icon 模块的示例和 API

• 并在父组件中：

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

这里person是 icon 的值，可以在这里找到： Angular Material Icons I

Answer 2

我找到了在 primeng 中使用材质图标的解决方法，但它需要使用一些 css 来正确设置图像和图标。

this.menuItems = [
  {
    label: '<p>Home <span class="material-symbols-outlined">home</span></p>',
    escape: false
  }
];

它在用户界面中的外观

确保在您的菜单项中使用escape: false 。