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.

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,

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,fontawesomeAngular Component for Font Awesome