First, the installation of fortawesome:
Offical Fontawsome
Installation of Ngfontawsome

Both site works but second has more detail.

Optional — install yarn by npm

npm install --save yarn-install

remember to install the following or you will have all black icons only.

$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/free-brands-svg-icons
$ yarn add @fortawesome/free-regular-svg-icons

add the Icon

There are two ways to imprement the icon:

  1. Explicit reference
  2. Using the Icon Library

Explicit involves more codes. I dont’ quite understand the difference bewteen those but the following may be a reason
NOT Proved
For using Expicit reference you have to import the Fontawsome explicitly, which enables compile time check. If someone changes the FA library (not remove, app module will notify), you will be noticed in development phase.(compile time error)

I display two method at the same time. For those Explicit method I will specially remark it.

In app.module.ts, import the following(I import whole lib for reason of laziness):
(Both methods need to import)

// other imports...
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; //<=======
import { library } from '@fortawesome/fontawesome-svg-core'; //<=======
import { fas } from '@fortawesome/free-solid-svg-icons'; //<=======
import { far } from '@fortawesome/free-regular-svg-icons'; //<=======

library.add(fas, far); //<=================== 

  declarations: [
  imports: [
    // ...
    FontAwesomeModule  //<===================
  providers: [
  bootstrap: [AppComponent]

In yours Compontent which you want to add Icons:
(mine is FavouriteComponent obviously.)

import { faStar as faStarB }from '@fortawesome/free-solid-svg-icons'; //<==== Expicit
import { faStar }from '@fortawesome/free-regular-svg-icons'; //<==== Expicit

export class FavouriteComponent implements OnInit {
  isFavouite = false;
  faStarB =  faStarB; //<==== Expicit
  faStar = faStar; //<==== Expicit

  constructor() {

  ngOnInit() {
  onClick()  {
    this.isFavouite = !this.isFavouite; // <====================



In favourite.component.html


<fa-icon [icon]="isFavouite? faStarB: faStar"
(click)="onClick()" size="lg"></fa-icon>

<h2>Use the Icon Library</h2>

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