How to use FontAwesome icons with Angular Material 19 standalone components?

I'm working on an Angular 19 project using standalone components and Angular Material.
I want to use FontAwesome icons (@fortawesome/angular-fontawesome) alongside Angular Material components like mat-icon, but I'm not sure about the correct way to integrate them.

Here’s what I’ve done so far:

/// <reference types="@angular/localize" />

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';


I installed the required packages:

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome


However, I’m not sure:

• How to properly register the icons with the FaIconLibrary in a standalone setup.
• How to use the <fa-icon> inside Angular Material components like mat-list, mat-toolbar, etc.
• Whether there is a clean way to use FontAwesome icons within mat-icon or if <fa-icon> must be used separately.

Any example or best practice would be appreciated!

Continue reading...