Angular Nebular theme using FontAwesome icon pack

Question

The stack: Angular 9.1.7, Nebular 5.0.0, FontAwesome 5.13

I want to change the default icon set (EvaIcons) used by Nebular to FontAwesome using this guideline:

https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack

Unfortunately the icons are not getting displayed. I'm close because the Nebular EvaIcons are no longer displayed. From the DeveloperTools, i can see nb-icon using fa-user, but nothing is displayed.

Can you share a link to refer to for the config, on the official docs I didn't see the CSS import step. — n002213f, May 23 '20 at 10:37

score 9 · Accepted Answer · answered Oct 26 '20 at 21:18

You didn't provide what you have installed or configured.

But here comes my answer anyways... I have managed load FontAwesome into my Nebular app. That said, not replacing EvaIcons but adding them additionally to Eva.

install FontAwesome.
Include it in your angular.json
Register the icon package in app.component
Use the FontAwesome within Nebulars nb-icon component

In Code:

1. npm install --save @fortawesome/fontawesome-free

2. "styles": [..., "node_modules/@fortawesome/fontawesome-free/css/all.css", ...],
   "scripts": [..., "node_modules/@fortawesome/fontawesome-free/js/all.js", ...]

3. import { NbIconLibraries } from '@nebular/theme';
   @Component({
     selector: 'ngx-app',
     template: '<router-outlet></router-outlet>',
   })
   export class AppComponent implements OnInit {
     constructor(private iconLibraries: NbIconLibraries) {
       this.iconLibraries.registerFontPack('fas', { packClass: 'fas', iconClassPrefix: 'fa' });
       this.iconLibraries.registerFontPack('far', { packClass: 'far', iconClassPrefix: 'fa' });
       this.iconLibraries.registerFontPack('fab', { packClass: 'fab', iconClassPrefix: 'fa' });
       this.iconLibraries.setDefaultPack('far');
   ...

4. <nb-icon icon="arrow-right" pack="fas"></nb-icon>

(Maybe there is a better way of doing this, maybe loading the js isn't required idk...)

This way you may use either Eva or FontAwesome Icons, or from whatever registered pack.

Eva:         <nb-icon icon="SOME_ICON">                           </nb-icon>
FontAwesome: <nb-icon icon="SOME_ICON" pack="fas/far/fab/fal/fad"></nb-icon>

This should be the correct answer - with this implementation, the font awesome icons will load correctly. — Aaron Lavers, Dec 04 '20 at 02:31

score 1 · Answer 2 · edited Jun 03 '21 at 13:50

Use the below method,

Install font-awesome

npm install --save @fortawesome/fontawesome-free

Add styles in angular.json file

"styles": [
     "node_modules/@fortawesome/fontawesome-free/css/all.css",
 ],

import in modules

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

imports: [
    NbIconModule,
],

In component.ts

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

In Component.html

<nb-icon icon="instagram" pack="font-awesome"></nb-icon>

I hope it will work

Angular Nebular theme using FontAwesome icon pack

2 Answers2