Details

Written by: admin

Category: Web Dev

Published: 09 August 2025

Hits: 105

https://www.npmjs.com/package/@fortawesome/angular-fontawesome

$ ng add @fortawesome/angular-fontawesome@<version>;

$ npm install @fortawesome/free-solid-svg-icons

Example Usage:

Install:
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/angular-fontawesome

Register FontAwesomeModule globally

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';
import { importProvidersFrom } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideHttpClient(),
importProvidersFrom(FontAwesomeModule)
]
};

Use icons in a component

import { Component } from '@angular/core';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@Component({
selector: 'app-home',
standalone: true,
imports: [FontAwesomeModule],
templateUrl: './home.component.html',
})
export class HomeComponent {
constructor(library: FaIconLibrary) {
library.addIcons(faGithub, faTwitter, faEnvelope);
}
}

Add Icons in HTML:
<a href="https://github.com/dg" target="_blank">
<fa-icon [icon]="['fab', 'github']"></fa-icon>
</a>
<a href="https://twitter.com/dg" target="_blank">
<fa-icon [icon]="['fab', 'twitter']"></fa-icon>
</a>
<a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">
<fa-icon [icon]="['fas', 'envelope']"></fa-icon>
</a>