如何在Angular项目的PrimeNG表格中自定义行展开收起的切换图标？

方法一：按钮内容自定义（推荐，灵活度最高） #

直接弃用pButton的[icon]绑定属性，在按钮内部根据expanded状态渲染对应自定义图标即可，支持自定义字体图标、svg、图片等任意形式的图标：

<button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain">
  <!-- 展开状态图标 -->
  <ng-container *ngIf="expanded">
    <!-- 替换为你自己的展开图标资源即可 -->
    <i class="custom-icon-expand"></i>
    <!-- 示例：img标签引入本地图标 <img src="assets/expand.png" alt="展开" width="16" height="16"> -->
  </ng-container>
  <!-- 收起状态图标 -->
  <ng-container *ngIf="!expanded">
    <i class="custom-icon-collapse"></i>
    <!-- 示例：img标签引入本地图标 <img src="assets/collapse.png" alt="收起" width="16" height="16"> -->
  </ng-container>
</button>

方法二：样式覆盖（适合全局统一替换场景） #

如果需要全站点统一替换PrimeNG行展开的默认图标，可以通过覆盖默认图标类的样式实现：

/* 替换收起状态默认图标 */
.pi.pi-chevron-right::before {
  /* 可直接填入图标base64地址，或者替换为自定义字体图标的编码和字体族 */
  content: url("data:image/svg+xml;base64,xxx你的图标base64编码xxx") !important;
  /* 自定义字体图标示例：
  font-family: '你的自定义字体图标库名' !important;
  content: '\e601' !important;
  */
}

/* 替换展开状态默认图标 */
.pi.pi-chevron-down::before {
  content: url("data:image/svg+xml;base64,xxx你的图标base64编码xxx") !important;
}

注意事项 #

• 如果仅需要修改当前页面的行展开图标，不要写全局样式，在组件样式中添加::ng-deep前缀同时加自定义父类限制范围，避免污染全局样式，示例：

  ::ng-deep .your-table-wrapper .pi.pi-chevron-right::before {
    /* 你的自定义样式 */
  }
  

• 如果使用其他组件库的图标组件（例如Material Icon、Ant Design Icon），直接将图标组件放入对应状态的ng-container中即可正常渲染。

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