Using other icons than PrimeIcons in Menu

Post Reply
acrombez
Posts: 2
Joined: 29 Nov 2019, 15:04

05 Oct 2020, 17:08

Since the PrimeIcons are a bit limited, I am trying to use one of the Material Design icons in the menu:

this.model = [
{
label: 'APPS',
items: [
{ label: 'Biking', icon: 'material-icons directions_bike', routerLink: ['/']}
]
},

The above doesn't work. I am not sure what to specify for the 'icon:' parameter.

Note that I included the MD icons through the style sheet in my index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

I verified this by putting a <i class="material-icons">directions_bike</i> somewhere in my app.main.component.html and that is showing the directions_bike icon.

Many thanks in advance,
Alfred

mert.sincan
Posts: 4352
Joined: 29 Jun 2013, 12:38

09 Oct 2020, 13:50

Hi,

Unfortunately, Diamond is not a Material Layout. Therefore, you can change some lines according to your needs. Please see this line;

Code: Select all

// app.menuitem.component.ts
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
And then, you can add material fonts.

Best Regards,

acrombez
Posts: 2
Joined: 29 Nov 2019, 15:04

10 Oct 2020, 18:04

Hi,

Thank you for your response. I will experiment with it.

However, it is not my intention to use Material Layout, just some material icons if they are not available in prime icons.

But what I understand from your reponse, it will be difficult to use a combination of material and prime icons.

Kind regards,
Alfred

mert.sincan
Posts: 4352
Joined: 29 Jun 2013, 12:38

10 Oct 2020, 18:45

Hi,

Thanks a lot for the update!
it will be difficult to use a combination of material and prime icons.
- Difficult but not impossible. I think you can handle this issue with a few small changes.

Best Regards,

Post Reply

Return to “Diamond - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest