CODEWITHSUNDEEP
angularfont-awesomenebular
Sunny
Sunny

Reputation: 928

Issues while integrating nebular with font-awesome

I am trying to use Font-Awesome icons with Nebular.

I have added the below lines in my app.component.ts file

constructor(private iconLibraries: NbIconLibraries) {
    this.iconLibraries.registerSvgPack('social-networks', {
      'association': '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">assets/images/building.svg</svg>',
      'calendar1': '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">assets/images/calendar.svg</svg>',
    });
    this.iconLibraries.setDefaultPack('social-networks');
  }

and trying to access the 'calendar1' icon like this.

{
    title: 'View Events',
    icon: 'calendar1',
    link: 'events',
  },

On console I am getting the below error - Icon 'calendar1' is not registered in pack 'eva'. Check icon name or consider switching icon pack.

But still the icon is not available . Can anyone please tell me what am i doing wrong. I have followed this article - https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack

Upvotes: 0

Views: 765

Answers (2)

Agha Ali Abbas
Agha Ali Abbas

Reputation: 195

You need to tell nb-icon which pack to use, You will need to update nebular to minimum 4.6.0 and then you can use it like this

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

after registering you need to add icon value like this

{
title: 'View Events',
icon: { icon: 'calendar1', pack: 'social-networks' },
link: 'events'},

Hopefully it helps. Moreover for use fontawesome icons you don't need to use separate svg's you can just register fontawesome in icon pack and access it. For registering fontawesome use this

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

and for using in nebular icon

{
title: 'View Events',
icon: { icon: 'fa-eur', pack: 'font-awesome' },
link: 'events'},

Upvotes: 0

ArtemRomanovsky
ArtemRomanovsky

Reputation: 129

Maybe I can be wrong, but it feels like you haven't installed the icon pack. Looking through the GitHub, found such an answer, hope it helps:

I managed to get mine working by first installing eva-icons npm i eva-icons --save and then running the following command npm i @nebular/eva-icons --save

Maybe these links will be useful: https://github.com/akveo/nebular/issues/1275 https://github.com/akveo/nebular/issues/1370

Upvotes: 1

Related Questions