The template for menuicon in the menubar doesn't work

[ricardosobrado]

Describe the bug

In this code:

    <ng-container>
       <p-menubar [model]="[button]">
         <ng-template pTemplate="item" let-item>
           <div *ngIf="!item.items; else submenu">
             <ng-template pTemplate="menuicon">
               <span class="material-icons">arrow_drop_down</span>
             </ng-template>
             <span>{{ item.label }}</span>
           </div>
           <ng-template #submenu>
             <ng-template pTemplate="menuicon">
               <span class="material-icons">arrow_drop_down</span>
             </ng-template>
             <span>{{ item.label }}</span>
             <ul class="submenu">
               <li *ngFor="let subitem of item.items">
                 <ng-container *ngTemplateOutlet="recursiveItem; context: { $implicit: subitem }"></ng-container>
               </li>
             </ul>
           </ng-template>
         </ng-template>
       </p-menubar>
     </ng-container>

I'm trying to use the pTemplate="menuicon" to define a custom icon but it doesn't work, the icon is not viisble! Observing the devtools i could see that the angular material icon was replaced by

<barsicon class="p-element p-icon-wrapper ng-star-inserted"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.3226 3.6129H0.677419C0.497757 3.6129 0.325452 3.54152 0.198411 3.41448C0.0713707 3.28744 0 3.11514 0 2.93548C0 2.75581 0.0713707 2.58351 0.198411 2.45647C0.325452 2.32943 0.497757 2.25806 0.677419 2.25806H13.3226C13.5022 2.25806 13.6745 2.32943 13.8016 2.45647C13.9286 2.58351 14 2.75581 14 2.93548C14 3.11514 13.9286 3.28744 13.8016 3.41448C13.6745 3.54152 13.5022 3.6129 13.3226 3.6129ZM13.3226 7.67741H0.677419C0.497757 7.67741 0.325452 7.60604 0.198411 7.479C0.0713707 7.35196 0 7.17965 0 6.99999C0 6.82033 0.0713707 6.64802 0.198411 6.52098C0.325452 6.39394 0.497757 6.32257 0.677419 6.32257H13.3226C13.5022 6.32257 13.6745 6.39394 13.8016 6.52098C13.9286 6.64802 14 6.82033 14 6.99999C14 7.17965 13.9286 7.35196 13.8016 7.479C13.6745 7.60604 13.5022 7.67741 13.3226 7.67741ZM0.677419 11.7419H13.3226C13.5022 11.7419 13.6745 11.6706 13.8016 11.5435C13.9286 11.4165 14 11.2442 14 11.0645C14 10.8848 13.9286 10.7125 13.8016 10.5855C13.6745 10.4585 13.5022 10.3871 13.3226 10.3871H0.677419C0.497757 10.3871 0.325452 10.4585 0.198411 10.5855C0.0713707 10.7125 0 10.8848 0 11.0645C0 11.2442 0.0713707 11.4165 0.198411 11.5435C0.325452 11.6706 0.497757 11.7419 0.677419 11.7419Z" fill="currentColor"></path></svg></barsicon>

Environment

I'm using Angular 16 with backend in .Net core

Reproducer

No response

Angular version

16

PrimeNG version

16.4.4

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

v21.5.0

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

I was expecting that a custom icon I define inside of <ng-template pTemplate="menuicon"> like for example <ng-icon></ng-icon> would work properly and I could see my custom icon!

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,