FontAwesome Icons in Angular 6?

Question

I'm trying to use icons from FontAwesome in an Angular project.
I started with the "Getting Started" guide you can find here: FontAwesome Angular Getting Started

Everything works fine, i can see the faCoffee icon wherever i put it in my templates. But if I try to change it to another icon (ex. the "check" icon), nothing is shown.

I changed my icon declaration at component-level to make it look like this:

import { faCheck } from '@fortawesome/free-solid-svg-icons';

Changed the html template to show my new icon:

<fa-icon [icon]="faCheck"></fa-icon>

Then the icon field assignment in my component:

faCheck = faCheck;

Please note that i'm changing essentially only the name of the icon from the examples that i tested and are working at the Url i posted above. Even if I go to the definition of "faCheck" on my declaration, i see that it's defined so I expect it to be available.

Chrome console shows this error when page is loading:

FontAwesome: Could not find icon. It looks like you've provided a null or undefined icon object to this component.

First attempt to use FontAwesome in my projects, useful general informations are welcome.

UPDATE: Got it working rebuilding my entire application. I was using VS Code, so when you save a file he tries to recreate the final bundle to let you navigate and check your development. I don't know what really happens with components in-memory state. I think the icon was not showing because of some misalignment of references.

Answer 1

1- Install this npm install @fortawesome/fontawesome-free

2- Add this to angular.json (angular-cli.json)

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

3- Now you can use fonts with <i> tag

Answer 2

all you have to do is:

1 - add this to your index.html:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

2 - use your icon as:

<i class="fas fa-check"></i>

You don't have to add anything in your component.ts nor in your app.module.ts nor install anything with yarn or npm.

EDIT: To answer you question, here is a stackblitz with the faCheck used as mentioned in the tutorial, it's working for me: https://stackblitz.com/edit/angular-4ebr9t

check if you installed all the dependencies as said in the tutorial.