2

I am using primeNG in one of my project. I have used Table with sorting from primeNG. I want to used customized icons for sorting.

Any idea how to override the existing primeNG icons.

PrimeNG version - 6.1.4

Frank N
  • 9,625
  • 4
  • 80
  • 110
Dead Programmer
  • 123
  • 1
  • 5
  • 14

2 Answers2

4

Create a class for your table like i created 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>

Now override below css in your style.css and use your own content-type code:

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

It will change the icon of your table where ever you will use class="test-data". More content type code is here content-type-code and here

DirtyMind
  • 2,353
  • 2
  • 22
  • 43
1

You can use the font-awesome icons by using the icon attribute.|

for example <button pButton type="button" icon="fa fa-user"></buton>

else you can customize the default icon.

just like I've done on the p-table sort icon...

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

Don't forget to add font-family to "FontAwesome"

pawanzZ
  • 21
  • 3