Font Awesome 5 with Angular

Question

How do I use font-awesome 5 with Angular (2+)?

I've tried adding this inside a component:

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
...
constructor(){
   fontawesome.library.add(faChevronLeft, faChevronRight);
}

and then in HTML:

<span class="fa" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

But this gives me a blinking question mark in a circle.

"This project is not yet production-ready. It's basically an elaborate "hello world" of FA5 icons, presented with an Angular component, using the Font Awesome 5 API." Also, it is not published in NPM. — JeB, Dec 29 '17 at 19:25

JeB · Accepted Answer · 2018-04-08T18:38:40.407

80

You have two options:

1. Use angular-fontawesome library

Just follow the instructions on their github page.

2. Use fontawesome 5 directly

Make sure you have installed all the relevant npm packages.
For Pro packages check out this.

Import relevant icons:

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';

Add the icons to fontawesome library in global scope (not inside the component's constructor):
```
fontawesome.library.add(faChevronLeft, faChevronRight);
```

Use it in html:

<span class="fas" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

Mind the prefixes in html:
- fas for fontawesome-free-solid icons (works also with fa)
```

```
- fab for fontawesome-free-brands icons
```

```
- far for fontawesome-free-regular icons
```

```
- fal for fontawesome-free-light icons (pro)
```

```

Important note:

It's fine to use variables to define fontawesome classes as soon as it is done only once (at initialization). However, if the variable changes its value it won't be reflected in html. Consider this example:

<span class="fas fa-chevron-{{direction}}"></span>

This will put the right icon at the initialization time, but if the direction changes afterwards it won't be reflected.
The reason for this is that fontawesome 5 replaces the elements classed with fa ... with appropriate svg and once it is replaced no variable affects this.
If you want the above html to reflect runtime changes you have to change it like this:

<span *ngIf="direction==='right'"><span class="fas fa-chevron-right"></span></span>
<span *ngIf="direction==='left'"><span class="fas fa-chevron-left"></span></span>

The outer span is necessary as the inner span is replaced with svg so you can't put *ngIf on it.

Further reading:

edited Apr 08 '18 at 18:38

answered Dec 29 '17 at 19:24

JeB

11,653
10
58
87

If you want to keep the DOM a little cleaner, you can wrap the icon element inside an ng-container instead of a span. for example, – Dave Feb 09 '18 at 20:03
in response to my above comment, this is limited to when you only need the ngIf to evaluate once (on load), if the icon state is going to be dynamic, youll have to keep a span tag around it, as it will remain in the DOM, unlike the ng-container. in my app i have an 'X' icon that appears when a search input has a value. that value is a 2-way bound [(ngModel)] so span must be used in place of ng-container. – Dave Feb 09 '18 at 20:12
1

"This project is a work in progress, not yet production ready." - Is the readme just not updated or? :) – Marius Feb 12 '18 at 08:21
Dave, without a wrapped around the angular won't "track" the generated contents and every time the icon is changed a new svg will be generated. It needs a wrapper element. – George Mavritsakis Feb 26 '18 at 10:59
1

Suggestion to wrap span within a span was a life-saver for preserving my angular (click) event on the (now) outer span, as well as keeping a growing stack of icons from accumulating with each click on other spans. Hope that makes sense. In plain English... THANK YOU! – Wellspring Mar 29 '18 at 15:37
4

What do you mean by `Add the icons to fontawesome library in global scope`? – DongBin Kim Apr 19 '18 at 01:09
2

Meaning not inside the class. Right after the imports or similar. – JeB Apr 19 '18 at 06:56
Man - i love you! You solved my 3 days struggle with angular :D – Paweł Domański Apr 23 '18 at 19:09
how to do it in angular-cli 6 – Aniruddha Das May 19 '18 at 17:14
I tried to use angular-font-awesome and it is based on an old version on font-awesome and it appears some of the icons are missing. – Andy Clark Jun 18 '18 at 17:32
1

@Andy Clark *angular-fontawesome* doesn't contain icons. You install it along with *fontawesome* library. Probably you installed the core icons but forgot to install the other ones. There are *free-solid-svg-icons*, *free-brands-svg-icons*, *free-regular-svg-icons* and more *pro* icons. It is all specified on their github page. – JeB Jun 19 '18 at 04:19
@meltedspark Somehow I found myself using this package: https://www.npmjs.com/package/angular-font-awesome. I will try again with the link in your answer. Thanks – Andy Clark Jun 19 '18 at 08:35

score 48 · Answer 2 · answered Sep 14 '19 at 09:04

48

The simplest way is to install it through npm and then import the styles:

1)

npm i @fortawesome/fontawesome-free --save

2) Import the styles in angular.json

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

And then you can use it as it is in their documentation

<i class="fas fa-address-card"></i>

answered Sep 14 '19 at 09:04

Dino

7,779
12
46
85

Working like a charm. Thanks ! – Razvan Feb 18 '20 at 20:54
2

Clean and easy. – Mishi Apr 07 '20 at 11:23
1

I suppose that tree shaking would not work in this case – slavugan Jan 29 '21 at 16:51
One thing I would add (which I wish I knew) is to always restart you app after modifying angular.json. If you are using an IDE always 'Stop' then 'Run'. – Catalin B Feb 13 '23 at 18:57

score 4 · Answer 3 · answered Oct 15 '18 at 21:01

4

I am using Font Awesome 5 in Angular

This is HTML code

<fa-icon [icon]="isFavorite ? ['fas','star'] : ['far','star']" (click)="onClick()"> Star </fa-icon>

This is my Component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
isFavorite: boolean;
  prefix:string;
  constructor() { }    
  ngOnInit() { }

  onClick(){
    this.isFavorite = !this.isFavorite;    
  }
}
`

answered Oct 15 '18 at 21:01

Meisam Mofidi

161
1
6

2

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Nic3500 Oct 16 '18 at 03:48
How can I get the icon name from a function? – James Poulose Nov 20 '20 at 03:51

Tuyen Tran · Answer 4 · 2022-09-13T13:57:20.730

0

Another way to render FontAwesome 5 in Angular using either WebFont or SVG:

https://www.npmjs.com/package/@ui4ngx/fontawesome

Demo

This uses HTML templates instead of Javascript rendering It provides the same features as angular-fontawesome library does

For older version (v4), you can use this

https://www.npmjs.com/package/@ui4ngx/fontawesome4

Demo

edited Sep 13 '22 at 13:57

answered Sep 13 '22 at 13:50

Tuyen Tran

11
2

Font Awesome 5 with Angular

4 Answers4

1. Use angular-fontawesome library

2. Use fontawesome 5 directly

Linked