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

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!

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

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