Angular 15中Primeng 15.4默认排序图标覆盖方法求助

先明确你两个方案的问题：

• 方案一：p-sortIcon组件本身没有sortAscIcon/sortDescIcon/sortNoneIcon这类输入属性，这些是Primeng Table的全局配置项，直接给组件加这些属性不会生效。
• 方案二：存在三处错误：标签缺少<前缀；类名绑定需用[ngClass]而非直接写class；三个条件都用了同一个图标类，逻辑完全错误。

下面提供两种可行的解决方式：

方式一：全局替换所有表格的排序图标 #

如果要统一替换所有p-table的排序图标，可通过以下两种方法实现：

方法1：CSS覆盖 #

在全局样式文件（如styles.scss）中添加：

/* 未排序状态 */
.p-sortable-column-icon.pi.pi-sort:before {
    content: "\e96a"; /* 替换为目标图标的Unicode值，比如pi-sort-alt的Unicode */
}

/* 升序状态 */
.p-sortable-column-icon.pi.pi-sort-up:before {
    content: "\e96b"; /* 替换为pi-arrow-up的Unicode */
}

/* 降序状态 */
.p-sortable-column-icon.pi.pi-sort-down:before {
    content: "\e96c"; /* 替换为pi-arrow-down的Unicode */
}

也可以直接替换图标类：

.p-sortable-column-icon.pi-sort {
    &:before {
        font-family: 'PrimeIcons';
        content: "\e96a";
    }
}
.p-sortable-column-icon.pi-sort-up {
    &:before {
        font-family: 'PrimeIcons';
        content: "\e96b";
    }
}
.p-sortable-column-icon.pi-sort-down {
    &:before {
        font-family: 'PrimeIcons';
        content: "\e96c";
    }
}

方法2：Sass变量替换（使用Primeng主题时） #

在主题文件中覆盖对应Sass变量后再引入主题：

$sort-icon: '\e96a';
$sort-up-icon: '\e96b';
$sort-down-icon: '\e96c';

@import 'primeng/resources/themes/lara-light-blue/theme.scss';

方式二：单个列自定义排序图标 #

如果只需要给特定列替换图标，配合pSortableColumn和表格实例联动：

首先给p-table添加模板引用变量：

<p-table #table [value]="data" [columns]="cols">
    <!-- 列模板 -->
</p-table>

然后在列模板中使用：

<th pSortableColumn="{{col.field}}">
    {{col.header}}
    <p-sortIcon 
        [ngClass]="{
            'pi pi-sort-alt': table.sortOrder === 0 || table.sortField !== col.field,
            'pi pi-arrow-up': table.sortOrder === 1 && table.sortField === col.field,
            'pi pi-arrow-down': table.sortOrder === -1 && table.sortField === col.field
        }"
    ></p-sortIcon>
</th>

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