Complete guide to Angular Font-awesome icons in Angular 11 and 12.

In this tutorial, we’ll learn how to use the font-awesome in an Angular project. The Font-Awesome teams have made an official Angular font-awesome component that’s available for all who want to integrate icons in an Angular project.

The font-awesome is a toolkit for web and mobile applications that provides icons and social logos. Like font awesome, we can also use an Angular material icon for an icon in an Angular project.

In this tutorial, we’ll learn how to add font awesome icon in our angular project. And also how we can change it font awesome icon style like color, size, position and animation. Let’s get started.

What is font-awesome ?

The Font-awesome is a Webfont used by web and application developers for icons instead of traditional old image icons. Font-awesome gives us abilities to scalable vector icons that can be easily customized in terms of size, color, drop shadow, and anything that can be done with the power of CSS.

Setting up Angular Font-awesome Apps

Let’s first create our Angular Font-awesome apps in which we will integrate the Font-Awesome library. We can use package managers like npm and yarn to easily install and upgrade to newer versions of Font Awesome.

ng new font-awesomeApps

Font awesome has both free and pro. The icon in font awesome is separated into different packages which allow us to install only the needed icon for our project. This helps to reduce the size of the font-awesome package size. In this tutorial, we’ll install a free icon for different packages.

$ng add @fortawesome/angular-fontawesome@0.7.x

Check an Angular and font-awesome compatibility

Before installing official an Angular component for font-awesome we have to check compatibility. For Angular 10, we have to install the 0.7.x version of the font-awesome component for angular.

Choosing Icons for Angular Font-awesome package

In the first example, we’ll demonstrate and use free font awesome of angular in our project. Before installing and using the icons, it’s important to know which icon we want to include in our project. As the Font Awesome libraries are structured and split into multiple packages for reduction of packages size. We’ll use four different font-awesome packages in our project.

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-brands-svg-icons
npm i --save fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-solid-svg-icons

Configure Font-awesome in Angular project

To get up and running using Font Awesome with Angular, we have to import FontAwesomeModule in our app.module.ts. There are two ways we can use font-awesome in angular. First by import individual package directly into our component or we import our required font-awesome package in app.module.ts to avoid naming confliction.

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 { faSun as farSun, faStar as farStar, faMoon as farMoon} from '@fortawesome/free-regular-svg-icons';
import { faSun as fasSun, faStar as fasStar, faMoon as fasMoon } from '@fortawesome/free-solid-svg-icons';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faStackOverflow, faGithub, faFacebook } from '@fortawesome/free-brands-svg-icons';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    // Add multiple icons to the library
    library.addIcons(fasSun, fasStar, fasMoon, farSun, farMoon, farStar, faStackOverflow, faGithub, faFacebook);
  }
}

Add Angular font-awesome icon in our component template

To use and place Font Awesome icons we need two pieces of information in class first-style prefix and the icon’s name. We’ve tried to make it so that icons take on the characteristics and appear alongside text naturally.

<fa-icon [icon]="['fas', 'sun']"></fa-icon>
<fa-icon [icon]="['far', 'sun']" ></fa-icon>
<fa-icon [icon]="['fab', 'facebook']"></fa-icon>

Edit app.component.html file to include an icon in our project.

<div class="flex-container">
    <div>
        <h2>Font-awesome for Brand name</h2>
        <fa-icon [icon]="['fab', 'facebook']" style="font-size:30px; color: #38539a;"></fa-icon>Facebook <br />
        <fa-icon [icon]="['fab', 'stack-overflow']" style="font-size:30px; color:red;"></fa-icon> Stack Overflow
        <br>
        <fa-icon [icon]="['fab', 'github']" style="font-size:30px;"></fa-icon>Github
    </div>

    <div>
        <h2>Font-awesome for Solid icon</h2>
        <fa-icon [icon]="['fas', 'sun']" size="lg" [styles]="{'stroke': 'orange', 'color': 'yellow'}"></fa-icon>
        <fa-icon [icon]="['fas', 'star']" size="lg" [styles]="{'stroke': 'orange', 'color': 'yellow'}"></fa-icon>
        <fa-icon [icon]="['fas', 'moon']" size="5x" [styles]="{'stroke': 'black', 'color': 'grey'}"></fa-icon>
        <fa-icon [icon]="faCoffee" size="5x" [styles]="{'stroke': 'black', 'color': 'brown'}"></fa-icon>
    </div>

    <div>
        <h2>Font-awesome for regular icon</h2>
        <fa-icon [icon]="['far', 'sun']" style="font-size:30px; color: yellow"></fa-icon>
        <fa-icon [icon]="['far', 'star']" size="lg" [pulse]="true" [styles]="{'stroke': 'red', 'color': 'red'}"></fa-icon>
        <fa-icon [icon]="['far', 'moon']" [spin]="true" size="10x" style="font-size:30px; color: grey"></fa-icon>
    </div>
</div>

In our template except for the coffee icon, all are imported from the app.module.ts to avoid naming conflict. We can also import font-awesome directly in our components like coffee. Edit app.component.ts file to import coffee icon.

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  faCoffee = faCoffee;
}

Styling font-awesome size and color

We can easily change the font-awesome size and color as.

<fa-icon [icon]="['fab', 'github']" size="sm"></fa-icon>
<fa-icon [icon]="['fab', 'github']" size="md"></fa-icon>
<fa-icon [icon]="['fab', 'github']" size="lg"></fa-icon>
<fa-icon [icon]="['fab', 'github']" size="xl"></fa-icon>
<fa-icon [icon]="['fab', 'github']" size="5x"></fa-icon>
<fa-icon [icon]="['fab', 'github']" size="10x"></fa-icon>

<fa-icon [icon]="['fab', 'github']" [style]="{'color': 'red' }"></fa-icon>
<fa-icon [icon]="['fab', 'github']" size="md" style="font-size:30px; color: yellow"></fa-icon>

Styling font-awesome position and animation

With the Font Awesome icon, we can scale, position, flip, & rotate icons arbitrarily using the data-fa-transform element attribute. We can even combine them for some super-useful effects.

<fa-icon [icon]="['fab', 'github']" size="lg" transform="flip-v"></fa-icon>
<fa-icon [icon]="['fab', 'github']" size="xl" transform="up-5" style="background:MistyRose"></fa-icon>
<fa-icon [icon]="['fab', 'github']" size="5x" transform="flip-v flip-h" style="background:MistyRose"></fa-icon>
<fa-icon [icon]="['fab', 'github']" size="10x" transform="rotate--90"></fa-icon>

Conclusion
Using Font Awesome and Angular together is a great combination. In this tutorial, we have explored different ways of using Font Awesome in Angular. Here’s a StackBlitz Starter Sample on how to display Solid, Regular, and Brand icons using the Icon Library from the official font-awesome component for angular.

Related Articles

• How to install Angular material ?
• How to implement CKEditor in Angular ?
• How to fix Firebase storage CORS issues in Angular and other frontend frameworks.
• How to add Angular signature pad in Angular 11 ?