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.

Brueghel

did you try fontIcon="fas fa-github" ? – Base

I haven't tried before, but I've just tried it now with no positive result. So I still can't display the font awesome icon. – Brueghel

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.

Grefe

Yes! it seems there is some issue with scss, it's not working. And I was not using the fontSet="fa", but I've found that as I'm using brands my fontSet needs to be "fab" if I use "fa" I only see a square. Thank you. – Brueghel

This solution suffers from treeshakability if you need it - instead the https://mcmap.net/q/513468/-use-font-awesome-5-on-angular-material-7 with "Small Amount Of Used Icons" can be opted. – Outspoken

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

Ruthful

It did help :) I'm building a cordova app and discovered that if I add the all.js my load time is greatly decreased. It appears that it's not needed for my app. – Formerly

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.

Ferule

This is what I've looking for. Thanks. – Thermaesthesia

The $fa-font-path should be "fort" and not "font". – Sheeting

Answer 4

I use this two solutions:

Large amount of used icons (fonts)

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 (SVG)

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>

Kaif

What library does the "small" solution you use ? – Outspoken

As the title says - Angular Material. material.angular.io/components/icon/api – Kaif

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);

Doane

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

Derisive

the BEST answer and currect :) – Vacuum

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>

Athwart

I believe this answer would be even better if the json snippet were included as text. – Loos