Ngx-admin: how to change the icons in pages-menu.ts?

[RossJohnDE]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [ ] feature request
• [x] question about the decisions made in the repository

Hi, I would like to ask how to use local icon in the page-menu.ts.
To be exactly:
I have a .png file in folder ./assets. In the page-menu.ts the icon is defined in the following part:

    title: 'Forms',
    icon: 'nb-compose',
    children: [ ... ]

How could I use the png file as icon? Thanks for the help!

[RossJohnDE]

@hntvip Thanks for the help. I tried with your method but sadly it doesnot work for me.

[nnixaa]

Hi @LucasMeier, you need to create a css class per each of your icons and then pass the class name in the menu configuration:

.my-icon {
  background: url(...);
} 

{
title: 'home:,
icon: 'my-icon',
}

Hope this helps.

[panxiaoke]

@nnixaa hello, where the css file can I create

[woodm1]

@nnixaa I've done this as described in a styles.css file in the src folder, (included in angular-cli.json) and the icon does not appear in the menu. Could you elaborate on how to get it to work please?

[dminazarov]

@nnixaa
I tried by the instruction you mentioned to change the icon.
But it is not working!
How can I change the icon?

[jbmyer94]

Has anyone found a working solution for custom icons? I've tried customizing sidebar menu icons with my own assets using @nnixaa suggestions and no luck so far.

[TheEast]

Facing this issue as well. Any help would be appreciated!
How to have customizable icons in the menu (pages-menu.ts) ?

[Cloudkasten]

I'm using this =>
icon: 'fa fa-home',
and import Font-Awesome in styles.

Actually you could change the "menu-item.component.html" in nebular/theme/components/menu. There you can change the following:

class to whatever is needed.

[nimaansary]

@Cloudkasten your first solution(icon: 'fa fa-home') not worked unfortunately.

i want to use ionicons and fontawesome icons in menu-items... any solutions?!