Angular 12环境下PrimeNg MenuBar使用Material Icons显示空白如何解决

核心原因：PrimeNg MenuBar默认的菜单项渲染逻辑会把icon属性值作为CSS类绑定到图标标签上，而Material图标需要将图标名作为标签文本、同时绑定material-icons专用类才能正常渲染，二者默认逻辑不匹配，所以直接配置图标名无法生效。

步骤1：确认Material图标基础配置正常 #

先在项目任意页面添加测试代码，确认Material图标本身可正常显示：

<span class="material-icons">how_to_reg</span>

如果测试图标不显示，先完成Material图标的基础配置：将字体文件引入项目、全局引入material-icons相关样式即可。

步骤2：自定义MenuBar菜单项渲染模板 #

修改MenuBar的组件调用代码，使用PrimeNg提供的pMenuItemTemplate自定义菜单项结构，兼容PrimeIcon和Material图标两种场景：

<p-menubar [model]="menu">
  <ng-template pMenuItemTemplate let-item>
    <div class="menu-item-container">
      <!-- PrimeIcon走原有逻辑 -->
      <ng-container *ngIf="item.icon?.startsWith('pi ')">
        <span [class]="item.icon"></span>
      </ng-container>
      <!-- Material图标走专用渲染逻辑 -->
      <ng-container *ngIf="item.icon && !item.icon?.startsWith('pi ')">
        <span class="material-icons">{{item.icon}}</span>
      </ng-container>
      <span>{{item.label}}</span>
    </div>
  </ng-template>
</p-menubar>

注：给menu-item-container添加自定义样式实现横向排列、垂直居中、图标和文字留间距即可，示例样式：display: flex; align-items: center; gap: 8px;

步骤3：保持原有菜单配置不变 #

你现有的菜单配置无需修改，仍然可以同时混用PrimeIcon和Material图标：

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

步骤4：可选样式调整 #

如果出现图标对齐、大小异常，添加全局样式微调即可：

.material-icons {
  font-size: 1rem;
  vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者Vaibhav Sawant