custom icons

[SUlbrichA]

Issue type

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

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

Issue description

Currently, it seems only nebular, font awesome and ionic icons are supported. It would be useful to have a method to add additional custom icons (especially to the sidenav bar)

[ps-arndwestermann]

Agree, schould be added!

[oleersoy]

Isn't adding icons just a matter of adding the CSS library to package.json?

[yggg]

Hi @SUlbrichA. Could you please clarify what do you mean by support?
Oleersoy's answer is correct, you can install and use any icon pack.
Thanks, @oleersoy!

[SUlbrichA]

hi again, sorry haven't worked on that for a while. I just want to use a random svg or png as an icon. Actually, it seem that #1592 addresses the same issue. I tried adding the following to pages.component.scss

.myico {
  background: url('/assets/images/icon.svg') 50% 50%;
}

Without luck

Edit: when I add it to src/app/@theme/styles/styles.scss it works:

.myico {
  background: url('/assets/images/icon.svg';
  height: 50px;
  width: 50px;
}

Why does do I have to add it globally to the style and not to the component's (sorry if that's a stupid question)?

[henpanta]

Hi

any progress on this? I can't use my custom SVG files in the pages-menu.ts, which is painful because the default iconpacks does not have even a similar icon I could use.
The CSS solution written above is not working.
Even if I register my images the following way:

  import { NbIconLibraries } from '@nebular/theme';

  constructor(private iconLibraries: NbIconLibraries) {
    this.iconsLibrary.registerSvgPack('social-networks', {
          'facebook': '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> ... </svg>',
          'twitter': '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"> ... </svg>',
          // ...
    });
  }

the icon is still not displayed.
A possible solution would be to replace the nb-menu with my own version, but I wouldn't like to spend time with it, if there is another way.

[rabiee3]

@henpanta just make sure that you add the pack in the MENU_ITEMS
like this
{
title: 'E-commerce',
icon: { icon: 'facebook', pack: 'social-networks' },
link: '/pages/dashboard',
home: true,
},

then the registerSVG should work properly

[TanTrinh]

Hi @rabiee3,

I have tried your code above, but it's not working.
Because the icon is declared as a string in NbMenuItem. Therefore, an object as your description can not work.

Does anyone know how to resolve this issue?

[rabiee3]

@TanTrinh
First of all, I am not telling you the solution hypothetically because i already have a (Angular8 - Nebular4) project running in which i have 3 icon packs: a custom one from my own making, ionicons and font awesome and they are all working together perfectly.

Secondly, please take a closer look at the "NbMenuItem" class.
You'll find that icon is not declared as a string only, it is declared as
icon?: string | NbIconConfig;

and if you take a look at the NbIconConfig you'll find its declaration as following:
export interface NbIconConfig { icon: string; pack?: string; status?: NbComponentStatus; options?: { [name: string]: any; }; }

So the problem is either in your code or in the nebular version that you have.
Please try my solution again.

[TanTrinh]

Hi @rabiee3,

Thanks for your reply, you are correct.
The problem is from my nebular/theme version. I've updated it and the code above work as expected.

[codesiddhant]

it is very easy to register and use your own custom icon in sidebar menu by following simple steps
Step 1 (for registring the custom icon pack for your moduel )
go to this path "src\app\pages\pages.module.ts"
Step 2
Mention this code
export class PagesModule { constructor(iconsLibrary: NbIconLibraries) { iconsLibrary.registerFontPack('fa', { packClass: 'fa', iconClassPrefix: 'fa' }); iconsLibrary.registerFontPack('far', { packClass: 'far', iconClassPrefix: 'fa' }); // iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' }); iconsLibrary.registerSvgPack('social-networks', { 'python': '<img src="../../assets/python.png" width="25px">', }); } }
Step 3
go to this path "src\app\pages\pages.menu.ts"
add your menu with icon like this
{ title: 'Dashboard', icon: { icon: 'facebook', pack: 'social-networks'}, link: '/pages/dashboard', home: true, },

see the result here

[pankajtechtrail]

How to show an icon in the nb-menu? I see the options to add the facility to use font icons only.

[rabiee3]

@henpanta just make sure that you add the pack in the MENU_ITEMS
like this
{
title: 'E-commerce',
icon: { icon: 'facebook', pack: 'social-networks' },
link: '/pages/dashboard',
home: true,
},

then the registerSVG should work properly

@pankajtechtrail