Angular 17与PrimeNG 17中替换内置图标为Material图标问题

你遇到的核心问题是：PrimeNG的p-menuitem-icon是菜单项图标的必填类，手动移除会破坏元素结构导致图标消失；而原CSS用attr(class)会把所有类名（包括p-menuitem-icon）作为Material图标的content，导致生成无效的图标内容。

下面给两种可行的解决方法：

方法一：用自定义属性传递图标名称（推荐，扩展性强） #

这种方法不需要逐个写图标CSS，通过自定义CSS变量传递Material图标名称：

1. 修改菜单项配置
   在定义MenuItem数组时，给需要用Material图标的项添加自定义样式类和CSS变量：

import { MenuItem } from 'primeng/api';

export class YourComponent {
  items: MenuItem[] = [
    {
      label: '文档',
      styleClass: 'material-icon-menu-item',
      style: {'--material-icon': "'description'"} as Record<string, string>
    },
    {
      label: '首页',
      styleClass: 'material-icon-menu-item',
      style: {'--material-icon': "'home'"} as Record<string, string>
    }
  ];
}

2. 更新全局样式（style.scss）
   替换原有的CSS规则，改为通过自定义变量获取图标名称：

@import "primeicons/primeicons.css";

/* 重置PrimeNG图标样式，启用Material字体 */
.material-icon-menu-item .p-menuitem-icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  /* 继承菜单文字颜色，保持样式统一 */
  color: inherit;
}

.material-icon-menu-item .p-menuitem-icon::before {
  content: var(--material-icon);
  display: inline-block;
}

方法二：针对单个图标类写CSS规则（适合图标数量少的场景） #

如果不想修改组件代码，可以直接针对每个Material图标类写CSS规则，覆盖PrimeNG的样式：

@import "primeicons/primeicons.css";

/* 统一重置非PrimeIcon图标的基础样式 */
.p-menuitem-icon:not([class*="pi-"]) {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* 逐个设置Material图标对应的content */
.p-menuitem-icon.description::before {
  content: 'description';
}

.p-menuitem-icon.home::before {
  content: 'home';
}

.p-menuitem-icon.settings::before {
  content: 'settings';
}
/* 其他需要的图标继续添加 */

原方法失效原因 #

原CSS中attr(class)会把元素的所有类名（比如p-menuitem-icon description）都作为content值，而Material Icons要求content是单个图标名称，所以无法正确渲染。同时p-menuitem-icon是PrimeNG菜单项图标容器的必要类，移除后会导致图标容器结构被破坏，自然看不到图标。

内容的提问来源于stack exchange，提问作者Chandrahaas Vemula