Use font awesome 5 on angular material 7

Question

I'm using angular 7.0.1 and angular material 7.0.2, I want to add the font awesome 5.4.2 icons and I'm trying to follow the steps on fontawesome web but I can't get the font awesome icon font.

first:

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

then in styles.scss add:

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';

and in _variables.scss add:

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

now in app.component.ts add:

import { MatIconRegistry } from "@angular/material";

[...]

constructor(
    public matIconRegistry: MatIconRegistry,
  ) {
    matIconRegistry.registerFontClassAlias ('fas');  // tried with 'fas' and with 'fa'
  }

and finally I'm suposed to print the font awesome icons with:

<mat-icon mat-list-icon fontIcon="fas github"></mat-icon>  // tryed also with 'fas-github', 'fasGithub', 'github', 'fa-github', 'fa github' and 'faGithub'

But the font awesome icon font is never printed. I'm missing something important and obvious but right now I'm not seeing it.

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

I use this two solutions:

Large amount of used icons

Import main fontawesome.scss file.

Import preferred style file, e.g. regular.scss (both in angular.json or via @import).

Register default font set in module, so you don't have to define it for each icon:

constructor(private matIconRegistry: MatIconRegistry) {
    matIconRegistry.setDefaultFontSetClass('far'); // or 'fas' for solid style etc.
}

Finally define icon line this:

<mat-icon fontIcon="fa-smile"></mat-icon>

Small amount of used icons

It is not necessary to import all icons, but you only need to define each icon separately in module. Other advantage are that you can define you own icon name for better clarity, combine icons with different styles (solid, duotones...) without loading another icon set, or simply add your own svg icons or logo.

constructor(private matIconRegistry: MatIconRegistry,
            private sanitizer: DomSanitizer) {
    matIconRegistry.addSvgIcon('smile', sanitizer.bypassSecurityTrustResourceUrl('smile.svg'));
}

Icon:

<mat-icon svgIcon="smile"></mat-icon>

Answer 5

    <fa-icon icon="fa-clipboard-check"></fa-icon>

Make sure FontAwesomeModule is imported in the container module of your component.

In case you need svg:

    import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
    import { library } from '@fortawesome/fontawesome-svg-core';
    import {faClipboardCheck} from '@fortawesome/free-solid-svg-icons';
    library.add(faClipboardCheck);

Answer 6

If You want to use Font Awesome icons inside <mat-icon> Just use as bellow,

<mat-icon><i class="fa fa-file-chart-line"></i></mat-icon>

** You should have imported the Font Awesome CSS or SCSS to you project

Answer 7

I downloaded font-awesome package and copied /webfonts folder and /css/all.css file to src/assets/. I added the path src/assets/css/all.css to the styles array in build options in my angular.json as shown below.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "NAME_OF_PROJECT": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/NAME_OF_PROJECT",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/.well-known"
            ],
            "styles": [
            "src/styles.scss",
            "src/assets/css/all.css",
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        }
      }
    }}
}

Now the font awesome icons are available to use in your angular application. I used class fa-2x to control the size of the icon. changing fontSet to "fal" will give you light version of font awesome.

<mat-icon fontSet="fa" class="fa-2x" fontIcon="fa-user" matBadge="8" matBadgeSize="medium" matBadgePosition="after" matBadgeColor="warn"></mat-icon>