PrimeNG 15.4+如何替换表头排序图标？

方法：利用pSortIconTemplate自定义模板 #

PrimeNG的p-sorticon组件支持通过模板完全自定义不同排序状态下的图标，你可以直接在表头列（p-column/p-dataTableColumn）内部定义模板，根据当前排序状态切换图标：

1. 在组件模板中定义自定义排序图标模板
   针对每个需要替换图标的列，添加带有pSortIconTemplate指令的<ng-template>，通过let-sortOrder获取当前排序状态（0=未排序，1=升序，-1=降序）：

<p-dataTable [value]="yourData">
  <p-column field="name" header="名称">
    <!-- 自定义排序图标模板 -->
    <ng-template pSortIconTemplate let-sortOrder>
      <svg *ngIf="sortOrder === 0" class="custom-sort-icon" viewBox="0 0 24 24">
        <!-- 未排序状态的SVG路径 -->
        <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/>
      </svg>
      <svg *ngIf="sortOrder === 1" class="custom-sort-icon" viewBox="0 0 24 24">
        <!-- 升序状态的SVG路径 -->
        <path d="M7 14l5-5 5 5z"/>
      </svg>
      <svg *ngIf="sortOrder === -1" class="custom-sort-icon" viewBox="0 0 24 24">
        <!-- 降序状态的SVG路径 -->
        <path d="M7 10l5 5 5-5z"/>
      </svg>
    </ng-template>
  </p-column>
  <!-- 其他列... -->
</p-dataTable>

2. 添加自定义样式（可选）
   如果需要调整图标大小、颜色等，直接给自定义SVG添加CSS类：

.custom-sort-icon {
  width: 16px;
  height: 16px;
  fill: #666;
  transition: fill 0.2s;
}
/* hover状态下的颜色变化 */
.p-sortable-column:hover .custom-sort-icon {
  fill: #2196F3;
}

3. 全局替换（可选）
   如果所有列都需要统一图标，可以在根组件或共享模块中定义可复用模板，在需要的地方引用即可，这种方式比单独配置每一列更高效。

关键说明 #

• sortOrder的三个值对应三种状态：
  • 0：未排序（默认状态）
  • 1：升序排序
  • -1：降序排序
• 你可以把示例中的SVG换成企业内部的图标资源，比如直接引用本地SVG文件（<svg src="/assets/icons/sort-default.svg"></svg>），或者使用企业图标字体的<i>标签，只要对应状态判断逻辑不变即可。

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