Nebular: Nebular 4.0 : use custom icon for NbMenuItem

[sazalihisham88]

I have a bunch of custom icons which i then generated the font-face css file using icomoon. I have no problem using it in Nebular 3.x. Since Nebular 4.0 uses eva icons, is there any way to use my custom icon class in NbMenuItem? As for now it throws error stating no such icon in eva-icons.

[nnixaa]

Hi @sazalihisham88, please check out the "continue using nebular icons" section here https://akveo.github.io/nebular/docs/migration/350400-migration#5-migrate-to-evaicons. In the same way, you can use any icon pack.

We will add better docs for this soon.

[sazalihisham88]

Hi @nnixaa,

I just realized the documentation that you have pointed out. I managed to get my custom icon getting displayed. However, noticed that it can only switch one font pack with another. Currently, is it possible to use both my custom icons and eva icons?

[nnixaa]

At the moment, Nebular components don't accept the pack parameter, so they can only consume icons form the default icon pack.
We plan to add this soon https://github.com/akveo/nebular/issues/1323.

The <nb-icon pack="some-other-pack"> component can accept the pack name so that it can render icons form multiple packs.

[sazalihisham88]

Cool! I am closing this issue then.
Thanks!

[sancaruso]

Please @nnixaa, is it currently possible to use an other pack in NbMenuItem? If not the case, do you know when it will be possible?
I recently migrated from Nebular 3.x to Nebular 4, and I cannot use my icons anymore. The eva-pack is not complete enough. I used icons from FontAwesome pack. For example I need an icon representing a doctor, I cannot find such icon in Eva pack.

[yggg]

Hi @sancaruso, do you use both Eva and Font Awesome packs? Which is default then? The menu uses icons from default pack, so if you make Font Awesome pack default then you can use FA icons in the menu. It could be done via setDefaultPack method of NbIconLibraries service after you register font pack:

iconLibrary.registerFontPack('font-awesome', {...});
iconLibrary.setDefaultPack('font-awesome'); <-- here you specify font pack name you used in 'registerFontPack'

[zakariabuet13]

Hi @sancaruso,
Yes, it is possible to use other pack in NbMenuItem now. Register your icon pack in the component like:
this.iconLibraries.registerFontPack('font-awesome');
Then in menu item, use it like this:

{
  title: '...',
  icon: { icon: 'icon-name', pack: 'font-awesome' },
  link: '...'
}

[ahmedcharef]

Hi @sancaruso,
Yes, it is possible to use other pack in NbMenuItem now. Register your icon pack in the component like:
this.iconLibraries.registerFontPack('font-awesome');
Then in menu item, use it like this:

{
  title: '...',
  icon: { icon: 'icon-name', pack: 'font-awesome' },
  link: '...'
}

This is my constructor on icons.component.ts

constructor(iconsLibrary: NbIconLibraries) {
  this.evaIcons = Array.from(iconsLibrary.getPack('eva').icons.keys())
  .filter(icon => icon.indexOf('outline') === -1);

  iconsLibrary.registerFontPack('font-awesome');
  iconsLibrary.setDefaultPack('font-awesome');
}

Then in menu item, use it like this:

{
  title: '...',
  icon: { icon: 'icon-name', pack: 'font-awesome' },
  link: '...'
}

I got this error :

type '{ icon: string; pack: string; }' is not assignable to type 'string'.

[zakariabuet13]

Hi @ahmedcharef, which version of Nebular are you using? This will only work on the latest version(v4.2.2).

[ahmedcharef]

Hi @ahmedcharef, which version of Nebular are you using? This will only work on the latest version(v4.2.2).

Hi, I have update it now but it still doesn't work..

icon: { icon: 'fa fa-book', pack: 'font-awesome' },

[yggg]

@ahmedcharef please, remove fa from icon: 'fa fa-book'.
icon shouldn't have any spaces inside. You can specify fa pack class during registration of icon pack:

this.iconLibraries.registerFontPack('font-awesome', { packClass: 'fa' });

Then you don't need to specify fa for Font Awesome icons.

[zakariabuet13]

@ahmedcharef use it like this,
this.iconLibraries.registerFontPack('font-awesome', { iconClassPrefix: 'fa', packClass: 'fa' });
then in menu item,
icon: { icon: 'home', pack: 'font-awesome' },

[ahmedcharef]

I have succeed after doing these these steps as follow:

npm config delete "@fortawesome:registry"
npm config delete "//npm.fontawesome.com/:_authToken"

after I have installed the package

npm install --save-dev @fortawesome/fontawesome-free

in your angular.json add:

"node_modules/@fortawesome/fontawesome-free/js/all.js"
"node_modules/@fortawesome/fontawesome-free/css/all.css"

Add these lines into icon.component.ts

 constructor(private analytics: AnalyticsService,
    private iconLibraries: NbIconLibraries) {
      this.iconLibraries.registerFontPack('fa', { iconClassPrefix: 'fa' });
      this.iconLibraries.registerFontPack('fas', { iconClassPrefix: 'fas' });
      this.iconLibraries.registerFontPack('fad', { iconClassPrefix: 'fad' });
      this.iconLibraries.registerFontPack('fal', { iconClassPrefix: 'fal' });
      this.iconLibraries.setDefaultPack('fad');
  }

In NbMenuItem add icon like this:

 title: 'Garage',
 icon: { icon: 'warehouse', pack: 'fa' },

Boom! you get it ! ;)

[albertosgz]

It works to me registering Font Pack as font-awesome instead of fa in my component:

this.iconLibraries.registerFontPack('font-awesome', { iconClassPrefix: 'fa', packClass: 'fa' });