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

Question

I'm using Angular 2+ and Angular CLI.

How do I add font-awesome to my project?

Answer 1

For webpack2 use:

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

instead of file-loader?name=/assets/fonts/[name].[ext]

Answer 2

Using LESS (not SCSS) and Angular 2.4.0 and standard Webpack (not Angular CLI, the following worked for me:

npm install --save font-awesome

and (in my app.component.less):

@import "~font-awesome/less/font-awesome.less";

and of course you may need this obvious and highly intuitive snippet (in module.loaders in webpack.conf)

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

The loader is there to fix webpack errors of the kind

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)" 

and the regexp matches those svg-references (with or without version specification). Depending on your webpack setup you might not need it or you may need something else.

Answer 3

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>

Answer 4

UPDATE 8 Oct 2019:

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

npm install @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>

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

Answer 5

After some experimentation I managed to get the following working:

1. Install with npm:

   npm install font-awesome --save
   

2. add to angular-cli-build.js file:

   vendorNpmFiles : [
       font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
   ]
   

3. add to index.html

   <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
   

---

The key was to include the font file types in the angular-cli-build.js file

.+(css|css.map|otf|eot|svg|ttf|woff|woff2)

Answer 6

Edit: I'm using angular ^4.0.0 and Electron ^1.4.3

If you have issues with ElectronJS or similar and have a sort of 404 error, a possible workaround is to uedit your webpack.config.js, by adding (and by assuming that you have the font-awesome node module installed through npm or in the package.json file):

new CopyWebpackPlugin([
     { from: 'node_modules/font-awesome/fonts', to: 'assets' },
     { from: 'src/assets', to: 'assets' }
]),

Note that the webpack configuration I'm using has src/app/dist as output, and, in dist, an assets folder is created by webpack:

// our angular app
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app/app',
},

// Config for our build files
output: {
    path: helpers.root('src/app/dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
},

So basically, what is currently happening is:

• Webpack is copying the fonts folder to the dev assets folder.
• Webpack is copying the dev assets folder to the dist assets folder

Now, when the build process will be finished, the application will need to look for the .scss file and the folder containing the icons, resolving them properly. To resolve them, I've used this in my webpack config:

// support for fonts
{
    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
    loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},

Finally, in the .scss file, I'm importing the font-awesome .scss and defining the path of the fonts, which is, again, dist/assets/font-awesome/fonts. The path is dist because in my webpack.config the output.path is set as helpers.root('src/app/dist');

So, in app.scss:

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

Note that, in this way, it will define the font path (used later in the .scss file) and import the .scss file using ~font-awesome to resolve the font-awesome path in node_modules.

This is quite tricky, but it's the only way I've found to get around the 404 error issue with Electron.js