Page 1 of 1
Using Material Icons on menuitem
Posted: 11 Jul 2019, 13:04
by Dragday
Hello
I am trying to used material icons on a menuitem but it doesn't work.
I've tried using ui-icon prefix, ui- and with no prefix.
The icon doesn't display and shows a "-" at the end of the menu
Here is the code showing all the cases I tried
Re: Using Material Icons on menuitem
Posted: 19 Jul 2019, 09:43
by merve7
Hi,
AppMenu component uses directly material-icons class. That's mean, you need to use material icons with original names, not ui-icon or another prefix. For example;
Code: Select all
{label: 'Sample Page', icon: 'desktop_mac', routerLink: ['/sample']},
{label: 'Forms', icon: 'insert_chart', routerLink: ['/forms']},
{label: 'Data', icon: 'show_chart', routerLink: ['/data']},
{label: 'Panels', icon: 'pie_chart', routerLink: ['/panels']},
{label: 'Overlays', icon: 'help', routerLink: ['/overlays']},
Also, you can see icon example (all icons in model variable) in app.menu.component.ts file.
Re: Using Material Icons on menuitem
Posted: 08 Aug 2019, 15:19
by Dragday
Thank you
Re: Using Material Icons on menuitem
Posted: 12 Jul 2022, 09:00
by vsawant
Didn't work for me when trying to pass the material icon for MenuBar model.
No Icon is shown. It's only working when I am using prime icons by passing something like "pi pi-fw pi-shield"
Code: Select all
<p-menubar [model]="menu"></p-menubar>
Code: Select all
this.menu = [{
label: 'Products',
icon: 'pi pi-fw pi-user-edit',
items: [{
label: 'New / Update', icon: 'how_to_reg', routerLink: ['/products']
},
{
label: 'Review', icon: 'task', routerLink: ['/review']
}]
}];
More details :
https://stackoverflow.com/questions/699 ... ng-menubar
Re: Using Material Icons on menuitem
Posted: 13 Jul 2022, 16:44
by seymagullu
Hi,
We'll check and back to you.
Regards.
Re: Using Material Icons on menuitem
Posted: 25 Jul 2022, 13:21
by cetincakiroglu
Hi,
There is a tutorial about how to use material icons in PrimeNG components.
https://www.youtube.com/watch?v=3MF63kxFHjo
Regards