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!

Using Font Awesome without @fortawesome/angular-fontawesome):

I followed along with the below tutorial which works great.

Register fontawesome icons for use with material MatIcon

Install the package:

npm i font-awesome --save

Add the styles to angular.json:

"styles": [
    "node_modules/font-awesome/scss/font-awesome.scss",
]

Add some styles to make the font consistent in the global-styles.scss file.

.mat-icon.fa {
  font-size: 20px;
}

Then we need to add MatIconRegistry to the providers array of bootstrapApplication, so that we can configure it inside our root component.

import { MatIconRegistry } from '@angular/material/icon';
...

bootstrapApplication(IconOverviewExample, {
  providers: [
    ...
    MatIconRegistry,
  ],
}).catch((err) => console.error(err));

Then in the root component import MatIconRegistry and configure it for font awesome.

import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
...
@Component({
  selector: 'icon-overview-example',
  templateUrl: 'icon-overview-example.html',
  imports: [MatIconModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconOverviewExample {
  public matIconRegistry: MatIconRegistry = inject(MatIconRegistry);
  constructor() {
    this.matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

Then we can use them in the HTML, by providing fontSet and fontIcon:

<mat-icon
aria-hidden="false"
aria-label="Example home icon"
fontIcon="home"
></mat-icon>
<mat-icon fontSet="fa" fontIcon="fa-shopping-bag"></mat-icon>

Stackblitz Demo