How do I replace header icons in PrimeNG?

363 views Asked by At

Someone has asked this question before (How to replace table header sort icons in PrimeNG 15.4+), but their answer gave me the following error:

 error NG8001: 'SortAltIcon' is not a known element:
1. If 'SortAltIcon' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

139         <SortAltIcon *ngIf="sortOrder === 0">

It continued with the same error for the up and down icons. I've tried importing the 3 of them such as SortAltIcon using import { SortAltIcon } from 'primeng/icons/sortalt';. It has a warning in VSCode saying 'SortAltIcon' is declared but its value is never read..

My template for the sort icon is as was provided in the answer linked:

      <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" 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-up" 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-down" aria-hidden="true"></i></span>
        </SortAmountDownIcon>
      </ng-template>

Any ideas?

I tried doing exactly what the answer that I found said. I was expecting the table column header sort icon to change to the prime icons I set it to. Instead I got a compiler error.

0

There are 0 answers