Angular Quickstart with Font Awesome

Introduction

Whenever we create a SPA we need icons. Usually, most icons are delivered from the framework like Material or use a library. There are a lot of icon libraries available that are free to be consumed. Icons can be used to express emotions and also quickly understand the meaning of the action a button or a note does.

• @material-ui/icons
• Noun project
• Font awesome
• Line awesome

In this blog we will go with Font Awesome. The name itself states why it is awesome because even the free version is most sufficient even for enterprise use. It has around 1.5K icons. If you think you will be needing more customization out of the box like solid and duotone icons you can go for the pro pack with costs $99/year and you will get around 8K icons.

Getting started

If you are reading this blog i assume you are already familiar with creating angular applications. If not, just run the below from your terminal.

ng new angular-fontAwesome

• To run the app ng serve
• Now you have a simple angular app running. Now we need to install the font awesome library.

For demo purposes I’m demonstrating the installation of free version. If you have purchased pro version feel free to use it. Even the installation has some choices. You can either choose regular icons or solid icons.

First install the core package which is the main dependency.

    #Core package
    npm i @fortawesome/angular-fontawesome
    #Regular
    npm i @fortawesome/free-regular-svg-icons
    #Solid
    npm install @fortawesome/fontawesome-svg-core
    npm install @fortawesome/free-solid-svg-icons

If you are looking for branded icons like Facebook, Google,GDrive etc you have to install this package

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

Once you have installed the appropriate package, there are two ways to consume it from your angular application.

Angular Component

Add FontAwesomeModule to your app.module

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
//  Add to Imports
imports: [
        FontAwesomeModule
    ],

Now let’s say you need an icon you can import it from various modules assign it to a variable and use it like this

import { faStackOverflow,faStackExchange } from "@fortawesome/free-brands-svg-icons";

export class AppComponent {
    name = "Readers";
    faStackExchange= faStackExchange;
    stackoverFlow = faStackOverflow;
}

In your Html you can use it like this

<fa-icon [icon]="faStackExchange"> </fa-icon>Stack Exchange
<br>
<fa-icon [icon]="stackoverFlow">  </fa-icon>Stackoverflow

So if you look at the above process its a bit time consuming to import each and every icon, assign it to something and also we need to use the fa-icon package to consume it. You can also find my demo app on StackBlitz

What’s the other way around ?

The Simple CSS Way

This is the best and fastest way to consume the icons to your use case. The steps are very clean here.

1. You install the free/pro package similarly as earlier.
2. Here instead of importing the module, we import the actual CSS file that font-awesome package exports.

3. Open your angular.json and you need to add the CSS in the styles array

   “styles”: [ “node_modules/@fortawesome/fontawesome-pro/css/all.css” ],

You can also do the same from your styles.scss as well like this

    @import '../node_modules/@fortawesome/fontawesome-pro/css/all.css';

Once you have done the import you are good to go. You can head over to fontawesome site and search for the icon you want. Example let me find the stackoverflow icon.

• From the site you just copy the css class and you can add it on your plain html and the icon will work just like regular css.

    <i class="fab fa-stack-overflow"></i>

That’s it. You have successfully added font-awesome icon in a most efficient way.

Conclusion

In this blog, we have learned about how we can incorporate font-awesome into our angular application and consume the icons either using typescript way or the plain old CSS way. I hope you find it useful and will help you with your upcoming projects