Using Font Awesome with Angular Material 19 and Standalone Components

In this tutorial, we’ll explore how to use Font Awesome icons in Angular 19 with standalone components.

DEMO: https://stackblitz.com/edit/zg4jrfmf?file=.gitignore
Github: https://github.com/Carlos-Henreis/fontawesome-demo

Why Use Standalone Components in Angular?

Starting from the latest Angular versions, standalone components have emerged as a modern and simplified way of building applications. Unlike the traditional module-based approach (NgModules), standalone components eliminate the need to declare everything in a central module, making the code:

• Leaner
• More modular
• Easier to maintain
• Compatible with lazy loading and routing

Using Font Awesome in Angular Material

The idea is to use icons as fonts via <mat-icon>, in a lightweight, simple, and fully functional way.

Angular Material’s MatIconRegistry allows you to register custom icon sets using fontSet and fontIcon. With Font Awesome CSS included, each icon is represented by a CSS class like fa, fa-home, fa-user, etc.

• fontSet="fa" points to the font prefix fa
• fontIcon="fa-user" applies the Font Awesome class fa-user
• fontSet="fab" points to the brand prefix fab
• fontIcon="fa-angular" applies the Font Awesome brand icon fa-angular

Prerequisites

Before getting started, make sure you have:

• Angular CLI 17 or 18+ (we’ll use Angular 19 in this tutorial)
• Node.js 18+ installed

Creating an Angular Project with Standalone Components

If you haven’t created your project yet, run:

ng new fontawesome-demo --standalone
cd fontawesome-demo

Now let’s create a component to test Font Awesome icons with Angular Material:

ng generate component components/icon-test --standalone

The --standalone flag ensures the component is self-contained.

Now that the IconTestComponent is created, let's use it as the entry point of the application:

1. Edit app.component.ts:

// src/app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { IconTestComponent } from './components/icon-test.component';


@Component({
  selector: 'app-root',
  imports: [
    RouterOutlet,
    IconTestComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'fontawesome-demo';
}

2. Edite o app.component.html

<main class="main">
  <div class="content">
    <app-icon-test></app-icon-test>
  </div>
</main>

3. Run the Project

ng serve

Go to http://localhost:4200

Installing Angular Material

After creating the project, install Angular Material by running:

ng add @angular/material

Installing Font Awesome as a Web Font

Install the Font Awesome webfont version:

npm install @fortawesome/fontawesome-free

Then add the font path in your angular.json file:

"styles": [
  "node_modules/@fortawesome/fontawesome-free/css/all.css",
  "src/styles.scss"
]

Font Awesome + Angular Material in Practice

You can now combine mat-icon with Font Awesome icons seamlessly:

<mat-toolbar color="primary">
    <button mat-icon-button class="example-icon"
        aria-label="Example icon-button with menu icon">
        <mat-icon fontSet="fa" fontIcon="fa-bars" aria-hidden="false"
            aria-label="menu"></mat-icon>
    </button>
    <span>My App</span>
    <span class="example-spacer"></span>
    <button mat-icon-button class="example-icon favorite-icon"
        aria-label="Example icon-button with heart icon">
        <mat-icon fontSet="fa" fontIcon="fa-heart" aria-hidden="false"
            aria-label="like"></mat-icon>
    </button>
    <button mat-icon-button class="example-icon"
        aria-label="Example icon-button with share icon">
        <mat-icon fontSet="fa" fontIcon="fa-share" aria-hidden="false"
            aria-label="share"></mat-icon>
    </button>
</mat-toolbar>

Optional CSS for Visual Alignment

To match the styling of Angular Material icons:

.mat-icon.fa,
.mat-icon.fab {
    font-size: 20px;
    vertical-align: middle;
}

Testing in the Browser

Run:

ng serve

Then visit http://localhost:4200 to see Font Awesome icons integrated into your Angular Material layout.

Conclusion

Integrating Font Awesome with Angular Material 19 in a standalone component-based project is simple, powerful, and modular. With just a few steps, you can eliminate boilerplate and deliver elegant, modern user interfaces with minimal effort.