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
Using Material Icons on menuitem
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
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;
Also, you can see icon example (all icons in model variable) in app.menu.component.ts file.
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']},
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"
More details : https://stackoverflow.com/questions/699 ... ng-menubar
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']
}]
}];
-
- Posts: 130
- Joined: 17 Dec 2021, 09:33
Hi,
There is a tutorial about how to use material icons in PrimeNG components.
https://www.youtube.com/watch?v=3MF63kxFHjo
Regards
There is a tutorial about how to use material icons in PrimeNG components.
https://www.youtube.com/watch?v=3MF63kxFHjo
Regards
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest