cssangularprimengp-tableprimeicons

How to replace table header sort icons in PrimeNG 15.4+

In the latest release of PrimeNG the way sort icons are done has changed. They used to just have an i tag with CSS classes, which I was able to override in my CSS to use my company's icons:

enter image description here

but now they are using a template with an SVG:

enter image description here

I saw on their release notes how I can override an icon such as a drop-arrow in a menu: https://primeng.org/customicons

But in the case of the p-sorticon there are 3 different icons that could be shown depending on the sort state of the column. So how do I use the new template method for table sort icon replacement? I do not see any documentation.

Solution

  • We figured it out, finally:

      <ng-template pTemplate="sorticon" field="col.field" let-sortOrder>
    <SortAltIcon *ngIf="sortOrder === 0">
      <span><i class="p-sortable-column-icon pi pi-fw pi-sort-alt" aria-hidden="true"></i></span>
    </SortAltIcon>
    <SortAmountUpAltIcon *ngIf="sortOrder === 1" [styleClass]="'p-sortable-column-icon'">
      <span><i class="p-sortable-column-icon pi pi-fw pi-sort-amount-up-alt" aria-hidden="true"></i></span>
    </SortAmountUpAltIcon>
    <SortAmountDownIcon *ngIf="sortOrder === -1" [styleClass]="'p-sortable-column-icon'">
      <span><i class="p-sortable-column-icon pi pi-fw pi-sort-amount-down" aria-hidden="true"></i></span>
    </SortAmountDownIcon>
  </ng-template>

    Replace the i tag with the icon classes you want to use, or remove the i tag and use an SVG of your choosing.