PrimeNG treeTable - change default expandedIcon/collapsedIcon

Question

I am using treeTable from primeNG. I wanted to know how to change default expand and collapse icon.

I tried doing so... but I am not sure if I'm doing it the right way. I just want to replace those default expand/collapse icons to plus/minus. How do I go about?

I tried following.. but it didn't help.

demo

Answer 1

Here is how you can replace those icons in your CSS:

::ng-deep .pi-chevron-right:before {
  content: "\e90d";
}

::ng-deep .pi-chevron-down:before {
  content: "\e90f";
}

See demo

Answer 2

If you're using primeng 16 you can use the following template customization:

    <ng-template pTemplate="togglericon" let-open>
      <span *ngIf="open" class="pi pi-minus"></span>
      <span *ngIf="!open" class="pi pi-plus"></span>
    </ng-template>

Just place it inside your p-treetable element.
The 'let-open' just gives you access to the implicit boolean value of the context; you could change 'open' to whatever you want to refer to it as.

This probably works on earlier versions of primeng but I didn't test it.
Link to template customizations in the API:
https://primeng.org/treetable#api.treetable.templates