How to change PrimeNG datatable expander icon

Question

I am using PrimeNG datatable for my usage. Below is my code:

<p-dataTable [value]="alerts" [expandableRows]="true" [expandedRows]="expandedItems" #dt>
 <p-column expander="true"></p-column>
</p-dataTable>

How can I change the default icon for the row expander ?

Answer 1

You can override your component CSS like that :

::ng-deep .fa-chevron-circle-right::before {
  content: "\f055";
  color: green;
}

::ng-deep .fa-chevron-circle-down::before {
  content: "\f056";
}

See StackBlitz