Angular — Как использовать настраиваемые значки PrimeNG

Создайте класс для своей таблицы, как я создал test-data:

<p-table #tt [value]="testdata" class="test-data" selectionMode="single" [lazy]="true"
        [lazyLoadOnInit] = "false" (onLazyLoad)="loadDataLazily($event)">
<ng-template pTemplate="header">
                <tr>
                    <th *ngFor="let col of cols" [pSortableColumn]="col.header">
                        {{col.header}}
                        <p-sortIcon [field]="col.header" ariaLabel="Activate to sort"></p-sortIcon>
                    </th>
                </tr>
            </ng-template>

Теперь переопределите ниже css в вашем style.css и используйте свой собственный код типа контента:

.test-data .pi-sort:before {
    content: "\02C4"
    }
    .test-data .pi-sort-down:before {
        content: "\02C5";
    }
    .test-data .pi-sort-up:before {
        content: "\e914";
    }

Это изменит значок вашей таблицы, где бы вы ни использовали class="test-data". Дополнительный код типа контента находится здесь content-type-code и здесь

Вы можете использовать значки с потрясающим шрифтом, используя атрибут icon.|

например <button pButton type="button" icon="fa fa-user"></buton>

иначе вы можете настроить значок по умолчанию.

точно так же, как я сделал на значке сортировки p-table...

:host ::ng-deep .pi-sort-alt:before {
  content: "\F0DC";
  font-family: "FontAwesome";
}

Не забудьте добавить семейство шрифтов в FontAwesome.