Use font awesome 5 on angular material 7

I followed below simple steps, it works for me to install font awesome 5.6.3 (free version) in my Angular 7 project.

run below command to install font-awesome latest version.

npm install --save-dev @fortawesome/fontawesome-free

Add the file paths in the angular.json file.

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

for reference: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

Tats all.. hope this will help..

This is what I've done and it works for me:

In my styles.scss I have

@import "~@fortawesome/fontawesome-free/css/all.css";

Then I have

<mat-icon fontSet="fa" fontIcon="fa-clipboard-check"></mat-icon>

With scss it didnt work for me either.

If you use scss you can simply import styles to your vendor.scss:

$fa-fort-path: "~@fontawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

And use it normally:

<span class="fab fa-refresh fa-spin fa-github" aria-hidden="true"></spin>

Mind the namespaces, fab for brands, fas for solid etc.

That was the best option for me.

---

Or you can use angular-fontawesome library.