Import all icons from Fontawesome

Question

I using Fontawesome 5 in my Angular project in this way:

import fontawesome from '@fortawesome/fontawesome';
import { faBold, faItalic, faUnderline } from '@fortawesome/fontawesome-free-solid';

and in contructor:

fontawesome.library.add(faBold, faItalic, faUnderline)

But it's very silly to import each icon separately. Can I somehow import all the icons at once?

upd: import * as icons ... does not work.

score 27 · Accepted Answer · edited Aug 31 '18 at 18:49

27

import { fas } from '@fortawesome/fontawesome-free-solid';

and then

fontawesome.library.add(fas)

same for other styles

import { fab } from '@fortawesome/fontawesome-free-brands';
import { far } from '@fortawesome/fontawesome-free-regular';
...
fontawesome.library.add( fab, far );

edited Aug 31 '18 at 18:49

Christian Bangert

673
1
6
16

answered Apr 18 '18 at 11:00

sr9yar

4,850
5
53
59

Hi, can you please explain, why is that working? When I installed fontawesome 5 it didn't created any fontawesome-free-solid folder in node_modules and, therefore, I have an error when compile. How does it work? Thanks. – mimic Sep 18 '18 at 01:16
in recent version u should use `addIconPacks` method instead of `add` – yekanchi Sep 11 '21 at 14:18

score 4 · Answer 2 · answered Sep 19 '19 at 06:28

As in docs here, you can do

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

export class AppModule {

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

score 3 · Answer 3 · answered Aug 06 '19 at 22:02

Here is how I did it, I first import the Font awesome packages into the app module:

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

Importing the FontAwesomeModule also into the imports section.

Add the following in to your constructor of app module:

 constructor(){
    library.add(fab, far, fas);
  }

Now you can reference the Font Awesome icons from inside any component like in this markup example:

    <div class="crop"
     (click)="onClick()"
     [style.width.px]="starWidth"
     [title]="rating">
  <div style="width: 75px">
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
  </div>
</div>

Note that if you do not use the solid icons from the 'fas' library, you must specify the type of Font Awesome icon library, such as 'far' for the regular icons.

I ended up with using the following npm packages: "@fortawesome/angular-fontawesome": "^0.3.0", "@fortawesome/fontawesome-svg-core": "^1.2.21", "@fortawesome/free-brands-svg-icons": "^5.10.1", "@fortawesome/free-regular-svg-icons": "^5.10.1", "@fortawesome/free-solid-svg-icons": "^5.10.1",

Note: I did a downgrade to version 0.3.0 of the angular-fontawesome package.

Tested out in Angular 8.

score 2 · Answer 4 · answered Apr 17 '18 at 15:59

2

Why not loading the font as asset (adding the files to assets folder and defining the font in css file)? Then you have all characters (icons) available to use.

answered Apr 17 '18 at 15:59

August

2,045
10
23

Import all icons from Fontawesome

4 Answers4

Linked