Using Material Icons on menuitem

[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

[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.

[Dragday]

Thank you

[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

[seymagullu]

Hi,

We'll check and back to you.

Regards.

[cetincakiroglu]

Hi,

There is a tutorial about how to use material icons in PrimeNG components.
https://www.youtube.com/watch?v=3MF63kxFHjo

Regards