Primeng 15 how to override default sort icon in Angular 15

Question

I'm using Primeng 15.4 in Angular 15. Could you help to override the default icon. I tried the below 2 solutions but nothing was working

<p-sortIcon class="icon" sortAscIcon="pi-sort-up" sortDescIcon="pi-sort-down" sortNoneIcon="pi-sort-alt" [field]="col.field"></p-sortIcon>

and

p-sortIcon class="{'pi pi-arrow-up': sortOrder === 1, 'pi pi-arrow-up': sortOrder === -1, 'pi pi-arrow-up': sortOrder === 0}" [field]="col.field"></p-sortIcon>

Answer 1

What you've tried it does not work because it's not in primeng: Github issue. You can try the CSS solution from here

Answer 2

You can override it like below,

    p-sorticon {
    .p-icon-wrapper {
        font-family: 'primeicons', Arial, sans-serif;
        justify-content: center;
        font-size: 19px;
        &:before{
            content: '\e900'; /* modify as per your requirement  */
        }

        svg {
            display: none;
        }
    }

    sortamountupalticon.p-icon-wrapper:before {
        content: '\e900'; /* modify as per your requirement */
    }

    sortamountdownicon.p-icon-wrapper:before {
        content: '\e900'; /* modify as per your requirement */
    }
}

In above eg., we override the icon using primeicons. you can modify as per your requirement.