How to add font-awesome to Angular 2 + CLI project

The top answer is a bit outdated and there is a slightly easier way.

  1. install through npm

    npm install font-awesome --save

  2. in your style.css:

    @import '~font-awesome/css/font-awesome.css';

    or in your style.scss:

    $fa-font-path: "~font-awesome/fonts"; @import '~font-awesome/scss/font-awesome';

    Edit: as noted in the comments the line for fonts must be changed on newer versions to $fa-font-path: "../../../node_modules/font-awesome/fonts";

using the ~ will make sass look into node_module. It's better to do it this way than with the relative path. The reason is that if you upload a component on npm, and you import font-awesome inside the component scss then it will work properly with ~ and not with the relative path that will be wrong at that point.

This method works for any npm module that contains css. It works for scss as well. However if you are importing css into your styles.scss it won't work (and maybe vice versa). Here is why


If you are using SASS, you can just install it via npm 

npm install font-awesome --save

and import it in your /src/styles.scss with:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

Tip: Whenever possible, avoid to mess with angular-cli infrastructure. ;)


After Angular 2.0 final release, the structure of the Angular2 CLI project has been changed — you don't need any vendor files, no system.js — only webpack. So you do:

  1. npm install font-awesome --save

  2. In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below:

    "apps": [
    {
      "root": "src",
      "outDir": "dist",
      ....
      "styles": [
          "styles.css",
          "../node_modules/bootstrap/dist/css/bootstrap.css",
          "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
      ],
      ...
  }
  ]
],

    In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css".

  3. Place some font-awesome icons in any html file you want:

    <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

  4. Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes.

  5. Enjoy your awesome icons!

There are 3 parts to using Font-Awesome in Angular Projects

  1. Installation
  2. Styling (CSS/SCSS)
  3. Usage in Angular

Installation

Install from NPM and save to your package.json

npm install --save font-awesome

Styling If using CSS

Insert into your style.css

@import '~font-awesome/css/font-awesome.css';

Styling If using SCSS

Insert into your style.scss

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Usage with plain Angular 2.4+ 4+

<i class="fa fa-area-chart"></i>

Usage with Angular Material

In your app.module.ts modify the constructor to use the MdIconRegistry

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

and add MatIconModule to your @NgModule imports

@NgModule({
  imports: [
    MatIconModule,
      ....
  ],
  declarations: ....
}

Now in any template file you can now do

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>

Tags:

Angular

Webpack

Angular Cli

Recent Posts