Change open/close icon on PrimeNG Panel?

Issue

I'm trying to change the open/close icon on the Angular PrimeNG panel component. Currently it's a plus/minus sign, and I need to change it to a chevron up/chevron down icon. I've found how to add extra icons, but not how to replace the actual icon that controls the open/close behavior.

Any help is greatly appreciated!

Solution

You can achieve that be do the following:

In your component.html add template reference like #toggleablePanel:

<p-panel #toggleablePanel header="Header"  [toggleable]="true">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</p-panel>

In your compoenet.ts add read the reference using @ViewChild('toggleablePanel'):toggleablePanel:Panel and implements AfterViewInit interface.

Inside ngAfterViewInit():

  ngAfterViewInit(): void {
    this.toggleablePanel.collapseIcon = 'pi pi-chevron-down';
    this.toggleablePanel.expandIcon = 'pi pi-chevron-right';
  }

• Make sure to import panel from primeng/panel import { Panel } from 'primeng/panel';

This should works with you.

Answered By - Mouayad_Al