custom icons

[SUlbrichA]

Issue type

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

• [ ] bug report
• [x] 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

[pankajtechtrail]

@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

I want to show image icons rather than font icons in the menu.

[rabiee3]

@pankajtechtrail
you can't show images, but you can convert your image to svg using illustrator for an example, then registerSVGpack in your theme and then use normally like the font-icon

[Tabassum27]

can anyone help why below config for "ionic icon" is not working?

    title: 'E-commerce1',
    icon: {
      icon: 'desktop-outline',
      pack: 'ion'
    },

[Tabassum27]

registerFontPack('ion', { iconClassPrefix: 'ion' });

for ion, its not reflecting icons like "desktop-outline".