How to use fontawesome - Angular

This article is based on Angular CLI 15.1.4, Node 18.13.0, npm 8.19.3

FontAwesome is a popular icon library that provides scalable vector icons. It's easy to use FontAwesome in Angular with the @fortawesome/angular-fontawesome package, which provides Angular components for FontAwesome icons. This article is about how to use fontawesome in your Angular project.

💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.

If you want to know how to install, head over to How to install fontawesome in Angular.

How to use fontawesome 5+ in Angular 15?

After successfully installing fontawesome in your Angular project. Follow these three steps:

1. Add the FontAwesomeModule.
2. Tie the icon to the property in your component
3. Use the icon in your template.

1. Add the module in app.module.ts

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 {}

2. Tie the icon to the property in your component

Bind the icon you want to use to a variable in the component, where the icon should be used, for example 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;
}

3. Use the icon in your template

Provide the icon to the icon property in fa-icon component.

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

Instead of using property binding you can also supply an array with string values directly in your template. This is useful when layering icons, see Fontawesome Docs - Layering.

<fa-layers [fixedWidth]="true">
  <fa-icon [icon]="['fas', 'square']"></fa-icon>
  <fa-icon
    [inverse]="true"
    [icon]="['fas', 'spinner']"
    transform="shrink-6"
  ></fa-icon>
</fa-layers>

TL;DR

• To use Font Awesome in Angular,
  • import the FontAwesomeModule in your modules and
  • provide a value for the icon property you want to use with fa-icon component in the template.

Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut. If you want to know more about Angular, have a look at these Angular Tutorials.

References (and Big thanks): Angular, fontawesome Angular Component for Font Awesome