How to Install & Use Angular FontAwesome

In this guide let us learn to install and use Angular FontAwesome icons. FontAwesome is the most popular icon set and toolkit. It has both paid & free versions. This guide shows you how to use the Free version of Angular FontAwesome.

Table of Contents

Installing FontAwesome
Installing Icons
Using FontAswesome
- Directly in Component
Using Icon library
Search for Icons
Features of FontAwesome
References

Installing FontAwesome

The main package is @fortawesome/angular-fontawesome. You can install the latest version using the following command.

npm install @fortawesome/angular-fontawesome

Or You can install a particular version as shown below

npm install @fortawesome/angular-fontawesome@<version>

But before installing you need to know which version to install. Not all versions are compatible with the various Angular versions. The following table should give you an idea

Angular Fontawesome Version	Angular Version
0.1.x	5.x
0.2.x	6.x
0.3.x	6.x && 7.x
0.4.x, 0.5.x	8.x
0.6.x	9.x

Installing Icons

Next, we need to install icons. There are five icon sets available in FontAwesome. They are Solid, Regular, Light, Duotone & Brands. Out of which Solid, Regular & Brands has free icons. Light and Duotone only available as pro packages

//Icon core package

npm install @fortawesome/fontawesome-svg-core --save

//icons

npm install @fortawesome/free-solid-svg-icons --save

npm install @fortawesome/free-regular-svg-icons --save

npm install @fortawesome/free-brands-svg-icons --save

Using FontAswesome

Now there are two ways by which you can use the FontAwesome

Directly in Component
Using Icon library

Directly in Component

This method is useful when you use the FontAwesome in a few select components.

app.module.ts

Open the app.module.ts and import the FontAwesomeModule Module from the @fortawesome/angular-fontawesome library. Add it to imports metadata.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome' //Import here

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

FontAwesomeModule //add to imports array

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {

}

app.component.ts

In the component file import the icon. For example, we have imported the faCoffee icon from the solid icons package.

import { Component } from '@angular/core';

import { faCoffee } from '@fortawesome/free-solid-svg-icons'; //import icon

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

faCoffee =faCoffee //assign it to a component variable

}

app.component.html

You can use it as shown below in the template. We use the fa-icon directive. Pass the icon to the icon property using the property binding.

<h1>{{title}}</h1>

<fa-icon [icon]="faCoffee"></fa-icon> //use it in the component

Example

The following example shows how to use multiple icons

app.component.ts

import { Component } from '@angular/core';

import { faCircle,faSquare } from '@fortawesome/free-solid-svg-icons';

import { faCircle as farCircle,faSquare as farSquare } from '@fortawesome/free-regular-svg-icons';

import { faStackOverflow, faGithub, faMedium } from '@fortawesome/free-brands-svg-icons';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

faCircle=faCircle;

farCircle=farCircle;

faSquare=faSquare;

farSquare=farSquare

faStackOverflow=faStackOverflow

faGithub=faGithub

faMedium=faMedium

title = 'Angular FontAwesome Example';

}

app.component.html

<h1>{{title}}</h1>

<h2>Icons</h2>

<table>

<thead>

<tr>

<td>Solid Icons</td>

<td>Regular Icons</td>

</tr>

</thead>

<tbody>

<tr>

<td>Circle</td>

</tr>

<tr>

<td>Square</td>

</tr>

</tbody>

</table>

<h2>Brands</h2>

<p>StackOverflow : <fa-icon [icon]="faStackOverflow"></fa-icon>

</p>

<p>GitHub <fa-icon [icon]="faGithub"></fa-icon>

</p>

<p>Medium <fa-icon [icon]="faMedium"></fa-icon>

</p>

Using Icon library

This method allows you to define the icons once in app.module and use it across the application. We add the icons using the addIcons() or addIconPacks() methods of the FaIconLibrary

app.module.ts

Import FontAwesomeModule & FaIconLibrary library.
Import the icons, which you want to use from the icons packages.
Inject the FaIconLibrary in the app.module constructor.
Finally, add the icons to the FaIconLibrary library using the addIcons method.

The following example shows, how we can add icons to the icons library.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'

import { faCircle,faSquare } from '@fortawesome/free-solid-svg-icons';

import { faCircle as farCircle,faSquare as farSquare } from '@fortawesome/free-regular-svg-icons';

import { faStackOverflow, faGithub, faMedium } from '@fortawesome/free-brands-svg-icons';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

FontAwesomeModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {

constructor(library: FaIconLibrary) {

// Add an icon to the library for convenient access in other components

library.addIcons(faCircle,faSquare,farCircle,farSquare

,faStackOverflow,faGithub,faMedium);

}

app.component.ts

No need to import anything the component class.

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular FontAwesome Example';

}

app.component.html

In the template use the fa-icon directive. Pass the icon along with the package prefix to the icon property using the property binding. The syntax is [icon]="[prefix, iconName]". The prefixes are fas, far & fab for Solid, Regular and Brands icons respectively.

<h1>{{title}}</h1>

<h2>Icons</h2>

<table>

<thead>

<tr>

<td>Solid Icons</td>

<td>Regular Icons</td>

</tr>

</thead>

<tbody>

<tr>

<td>Circle</td>

</tr>

<tr>

<td>Square</td>

</tr>

</tbody>

</table>

<h2>Brands</h2>

<p>StackOverflow : <fa-icon [icon]="['fab','stack-overflow']"></fa-icon>

</p>

<p>GitHub <fa-icon [icon]="['fab','github']"></fa-icon>

</p>

<p>Medium <fa-icon [icon]="['fab','medium']"></fa-icon>

</p>

Search for Icons

You can search for icons from this link.

Features of FontAwesome

size

<fa-icon [icon]="['far', 'square']" size="xs"></fa-icon>

<fa-icon [icon]="['far', 'square']" size="sm"></fa-icon>

<fa-icon [icon]="['far', 'square']"></fa-icon>

<fa-icon [icon]="['far', 'square']" size="1x"></fa-icon>

<fa-icon [icon]="['far', 'square']" size="lg"></fa-icon>

<fa-icon [icon]="['far', 'square']" size="2x"></fa-icon>

<fa-icon [icon]="['far', 'square']" size="3x"></fa-icon>

<fa-icon [icon]="['far', 'square']" size="4x"></fa-icon>

<fa-icon [icon]="['far', 'square']" size="5x"></fa-icon>

<fa-icon [icon]="['far', 'square']" size="6x"></fa-icon>

<fa-icon [icon]="['far', 'square']" size="7x"></fa-icon>

Rotate

<fa-icon [icon]="['fab','github']" size="4x" ></fa-icon>

<fa-icon [icon]="['fab','github']" size="4x" rotate="90"></fa-icon>

<fa-icon [icon]="['fab','github']" size="4x" rotate="180"></fa-icon>

<fa-icon [icon]="['fab','github']" size="4x" rotate="270"></fa-icon>

Flip

<fa-icon [icon]="['fab','github']" size="4x"></fa-icon>

<fa-icon [icon]="['fab','github']" size="4x" flip="horizontal"></fa-icon>

<fa-icon [icon]="['fab','github']" size="4x" flip="vertical"></fa-icon>

<fa-icon [icon]="['fab','github']" size="4x" flip="both"></fa-icon>

Animations

<fa-icon [icon]="['fas','spinner']" size="4x" spin="true"></fa-icon>

<fa-icon [icon]="['fas','spinner']" size="4x" pulse="true"></fa-icon>

Border

<fa-icon [icon]="['fas','coffee']" size="4x" border="true"></fa-icon>

<fa-icon [icon]="['far','circle']" size="4x" border="true"></fa-icon>

<fa-icon [icon]="['fab','stack-overflow']" size="4x" border="true"></fa-icon>

Pull

<fa-icon [icon]="['fas','coffee']" size="4x" border="true"></fa-icon>

<fa-icon [icon]="['fas','coffee']" size="4x" border="true" pull="left"></fa-icon>

<fa-icon [icon]="['fas','coffee']" size="4x" border="true" pull="right"></fa-icon>

Styles

<fa-icon [icon]="['fas','coffee']" size="4x" border="true" [styles]="{'stroke': 'red', 'color': 'red'}"></fa-icon>

References

Component Styles

Angular Tutorial

How to Add Bootstrap to Angular

Installing FontAwesome

Installing Icons

Using FontAswesome

Directly in Component

Example

Using Icon library

Search for Icons

Features of FontAwesome

size

Rotate

Flip

Animations

Border

Pull

Styles

References

Related Posts

Leave a Comment Cancel Reply