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 {faChevronLe         


        

Answer 1

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.

1. Import relevant icons:

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

2. Add the icons to fontawesome library in global scope (not inside the component's constructor):

   fontawesome.library.add(faChevronLeft, faChevronRight);
   

3. Use it in html:

4. 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:

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:

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

Further reading:

• Use fontawesome 5 with node.js
• FontAwesome API