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

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> 

UPDATE Feb 2020:
fortawesome package now supports ng add but it is available only for angular 9 and up:

ng add @fortawesome/angular-fontawesome 

UPDATE 8 Oct 2019:

You can use a new package https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons 

Add FontAwesomeModule to imports in src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';   import { AppComponent } from './app.component'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';   @NgModule({   imports: [     BrowserModule,     FontAwesomeModule   ],   declarations: [AppComponent],   bootstrap: [AppComponent] }) export class AppModule { } 

Tie the icon to the property in your component src/app/app.component.ts:

import { Component } from '@angular/core'; import { faCoffee } from '@fortawesome/free-solid-svg-icons';   @Component({   selector: 'app-root',   templateUrl: './app.component.html' }) export class AppComponent {   faCoffee = faCoffee; } 

Use the icon in the template src/app/app.component.html:

<fa-icon [icon]="faCoffee"></fa-icon> 

ORIGINAL ANSWER:

Option 1:

You can use angular-font-awesome npm module

npm install --save font-awesome angular-font-awesome 

Import the module:

... // import { AngularFontAwesomeModule } from 'angular-font-awesome'; @NgModule({   //...   imports: [     //...     AngularFontAwesomeModule   ],   //... }) export class AppModule { } 

If you're using Angular CLI, add the font-awesome CSS to styles inside the angular-cli.json

"styles": [     "styles.css",     "../node_modules/font-awesome/css/font-awesome.css" ], 

NOTE: If using SCSS preprocessor just change the css for scss

Example Use:

<fa name="cog" animation="spin"></fa> 

Option 2:

There is an official story for that now

Install the font-awesome library and add the dependency to package.json

npm install --save font-awesome

Using CSS

To add Font Awesome CSS icons to your app...

// in .angular-cli.json  "styles": [   "styles.css",   "../node_modules/font-awesome/css/font-awesome.css" ] 

Using SASS

Create an empty file _variables.scss in src/.

Add the following to _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; In styles.scss add the following:

@import 'variables'; @import '../node_modules/font-awesome/scss/font-awesome'; 

Test

Run ng serve to run your application in develop mode, and navigate to http://localhost:4200.

To verify Font Awesome has been set up correctly, change src/app/app.component.html to the following...

<h1>   {{title}} <i class="fa fa-check"></i> </h1> 

After saving this file, return to the browser to see the Font Awesome icon next to the app title.

Also there is a related question Angular CLI outputs the font-awesome font files the dist root as by default angular cli outputs the fonts in to the dist root, which is by the way not an issue at all.