How to replace table header sort icons in PrimeNG 15.4+

Question

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:

but now they are using a template with an SVG:

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.

Answer 1

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.

Answer 2

You can achieve it globally like this in style.scss:

    sortalticon {
        display: none;
    }

    sortamountupalticon::before {
        content: "\2193";
    }

    sortamountdownicon::before {
        content: "\2191";
    }

    sortamountupalticon,
    sortamountdownicon {
        svg {
            display: none;
        }
    }

    sortamountupalticon::before,
    sortamountdownicon::before {
        font-size: 1rem;
        margin-top: -10px;
        margin-left: 0;
        color: var(--blue3);
    }