Font Awesome 5 and Angular 5

Question

I was using font-awesome npm package (which is Font Awesome 4.7 version) but I want to upgrade to Font Awesome 5. I've install the following packages :

"@fortawesome/angular-fontawesome": "^0.1.1",
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-free-brands": "^5.0.13",
"@fortawesome/fontawesome-free-regular": "^5.0.13",
"@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.0",
"@fortawesome/free-solid-svg-icons": "^5.1.0",

I was using icons like this :

<i class="fa fa-plus"></i>

With the new version I tried to use icons like this :

<i class="fas fa-sign-out-alt fa-2x"></i>

But this is not working. I try to add icons like this :

import {faSignOutAlt} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
fontawesome.library.add(faSignOutAlt);

in my app.module.ts and it is working, but I don't want to import each icon one by one. Is there a way to use them like I was doing with the previous version ? Eather a way to not import them one by one ?

Thanks

Answer 1

Yes, you could import and add them all

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas, far);
  }
}

However

You can also import entire icon styles. But be careful! This way of importing icons does not support tree-shaking, so all icons from the imported package will end up in the bundle.

Also, since you are using angular-fontawesome, use it:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FontAwesomeModule],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    // Add an icon to the library for convenient access in other components
    library.addIcons(faCoffee);
  }
}

and in html

<!-- simple name only that assumes the default prefix -->
<fa-icon icon="coffee"></fa-icon>
<!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>

All code taken from the official documentation

Answer 2

Install

npm install --save @fortawesome/fontawesome-free

and use in .angular-cli

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

reference : Using a Package Manager

Answer 3

I'm using this in angular 8 version. It's working perfectly. Please follow this simple procedure:

1. First install it by angular cli

   npm install --save @fortawesome/fontawesome-free

2. Open angular.json and update the css file as follow

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

3. Restart your server

eg, how to add

<i class="fas fa-paper-plane"></i>

Happy coding :)

For more font awesome icons