0

I use Primeng version 11 for my Angular 11 project. I am creating a panel menu using primeng and I want to change the p-panelmenu-icon to fa-caret-right but I don't know how to change the icon to fa-caret-down when click on a menu item.

Here is my app.component.ts file:

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    items: MenuItem[] = [];
    ngOnInit() {
        this.items = [
            {
                label: 'File',
                icon: 'pi pi-pw pi-file',
                items: [
                { label: 'Open', icon: 'pi pi-fw pi-external-link' },
                { separator: true },
                { label: 'Quit', icon: 'pi pi-fw pi-times' }
                ]
            },
            {
                label: 'Edit',
                icon: 'pi pi-fw pi-pencil',
                items: []
            }
        ];
    }
}

My app.component.html file

<p-panelMenu [model]="items" [style]="{ width: '300px',margin:'auto',padding:'2rem' }"></p-panelMenu>

My app.component.css file

:host ::ng-deep .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-icon::before {
  content: "\f0da"; /*caret-right*/
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 1rem;
  color: #ff9900;
}

The panel menu in primeng

Nhut Truong
  • 5
  • 2

1 Answers1

0

Try the following, it'll incorporate a caret-right icon exclusively onto the toggleable item:

:host ::ng-deep .p-menuitem-link:has(span.p-panelmenu-icon)::after,
:host ::ng-deep .p-panelmenu-header-link:has(span.p-panelmenu-icon)::after {
  content: '\e905';
  font-family: 'primeicons';
  font-weight: 900;
  font-size: 1rem;
  color: #ff9900;
  position: absolute;
  right: 1rem;
}
:host ::ng-deep .p-menuitem-link:has(span.p-panelmenu-icon.pi-angle-down)::after,
:host ::ng-deep .p-panelmenu-header.p-highlight > .p-panelmenu-header-link:has(span.p-panelmenu-icon)::after {
  content: '\e906';
  font-family: 'primeicons';
  font-weight: 900;
  font-size: 1rem;
  color: #ff9900;
  position: absolute;
  right: 1rem;
}

:host ::ng-deep .p-menuitem-link,
:host ::ng-deep .p-panelmenu-header-link {
  position: relative;
}

:host ::ng-deep .p-panelmenu-icon.pi-chevron-down,
:host ::ng-deep .p-panelmenu-icon.pi-chevron-right,
:host ::ng-deep .p-panelmenu-icon.pi-angle-down,
:host ::ng-deep .p-panelmenu-icon.pi-angle-right {
  display: none;
}
Mouayad_Al
  • 1,086
  • 2
  • 13