Angular FontAwesome is the official Angular component library for integrating Font Awesome icons into Angular applications. It provides a comprehensive set of Angular components for rendering Font Awesome 5, 6, and 7 icons with full TypeScript support, tree-shaking optimization, and Angular 20.x compatibility.
npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-coreimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';For individual component imports:
import {
FaIconComponent,
FaDuotoneIconComponent,
FaLayersComponent,
FaLayersTextComponent,
FaLayersCounterComponent,
FaStackComponent,
FaStackItemSizeDirective
} from '@fortawesome/angular-fontawesome';import { Component } from '@angular/core';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee, faSpinner } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-root',
imports: [FaIconComponent], // Import components directly
template: `
<fa-icon [icon]="faCoffee"></fa-icon>
<fa-icon [icon]="faSpinner" size="2x" animation="spin"></fa-icon>
`
})
export class AppComponent {
faCoffee = faCoffee;
faSpinner = faSpinner;
constructor(library: FaIconLibrary) {
// Add icons to library for string-based usage
library.addIcons(faCoffee, faSpinner);
}
}import { NgModule } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
@NgModule({
imports: [FontAwesomeModule],
// ...
})
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas);
}
}
// In your component template
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
<fa-icon icon="coffee" size="2x" animation="spin"></fa-icon>Angular FontAwesome is built around several key components:
FaIconComponent, FaDuotoneIconComponent)FaLayersComponent, FaStackComponent)Core icon rendering functionality supporting Font Awesome 5, 6, and 7 with extensive customization options including animations, transformations, and styling.
// Basic icon component
interface FaIconComponent {
icon: IconProp;
title?: string;
animation?: AnimationProp;
size?: SizeProp;
flip?: FlipProp;
rotate?: RotateProp | string;
pull?: PullProp;
border?: boolean;
inverse?: boolean;
fixedWidth?: boolean;
mask?: IconProp;
transform?: string | Transform;
symbol?: FaSymbol;
a11yRole?: string;
}Specialized duotone icon rendering with layer color and opacity customization for Font Awesome Pro duotone icons.
interface FaDuotoneIconComponent extends FaIconComponent {
swapOpacity?: 'true' | 'false' | boolean;
primaryOpacity?: string | number;
secondaryOpacity?: string | number;
primaryColor?: string;
secondaryColor?: string;
}Layered icon compositions for creating badges, notifications, and complex icon combinations with text and counter overlays.
interface FaLayersComponent {
size?: SizeProp;
fixedWidth?: boolean;
}
interface FaLayersTextComponent {
content: string; // required
title?: string;
flip?: FlipProp;
size?: SizeProp;
pull?: PullProp;
border?: boolean;
inverse?: boolean;
rotate?: RotateProp | string;
fixedWidth?: boolean;
transform?: string | Transform;
}
interface FaLayersCounterComponent {
content: string; // required
title?: string;
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
}Stacked icon compositions for creating multi-layered icons with foreground and background elements.
interface FaStackComponent {
size?: SizeProp;
}
interface FaStackItemSizeDirective {
stackItemSize: '1x' | '2x';
}Icon library service for efficiently managing icon definitions, adding individual icons or icon packs, and retrieving icons by prefix and name.
interface FaIconLibrary {
addIcons(...icons: IconDefinition[]): void;
addIconPacks(...packs: IconPack[]): void;
getIconDefinition(prefix: IconPrefix, name: IconName): IconDefinition | null;
}Global configuration service for setting default behaviors, icon prefixes, fallback icons, and CSS injection settings.
interface FaConfig {
defaultPrefix: IconPrefix; // default: 'fas'
fallbackIcon: IconDefinition | null; // default: null
fixedWidth?: boolean;
autoAddCss: boolean; // default: true
}// Icon specification types
type IconProp = IconName | [IconPrefix, IconName] | IconLookup;
type IconPrefix = 'fas' | 'far' | 'fab' | 'fal' | 'fad' | 'fat' | (string & {});
type IconName = string & {};
interface IconLookup {
prefix: IconPrefix;
iconName: IconName;
}
interface IconDefinition {
prefix: IconPrefix;
iconName: IconName;
icon: [number, number, string[], string, string | string[]];
}
interface IconPack {
[key: string]: IconDefinition;
}
// Animation and styling types
type AnimationProp = 'beat' | 'fade' | 'beat-fade' | 'bounce' | 'flip' |
'shake' | 'spin' | 'spin-reverse' | 'spin-pulse' | 'spin-pulse-reverse';
type SizeProp = 'xs' | 'sm' | 'lg' | '1x' | '2x' | '3x' | '4x' | '5x' |
'6x' | '7x' | '8x' | '9x' | '10x';
type FlipProp = 'horizontal' | 'vertical' | 'both';
type PullProp = 'left' | 'right';
type RotateProp = 90 | 180 | 270;
// Core FontAwesome types (re-exported from fontawesome-svg-core)
interface Transform {
size?: number;
x?: number;
y?: number;
rotate?: number;
flipX?: boolean;
flipY?: boolean;
}
type FaSymbol = boolean | string;
// Additional re-exported types from fontawesome-svg-core
interface IconParams {
title?: string;
transform?: Transform;
classes?: string[];
mask?: IconDefinition;
symbol?: FaSymbol;
attributes?: { [key: string]: string };
styles?: { [key: string]: string };
}
interface CounterParams {
title?: string;
classes?: string[];
}
interface TextParams {
title?: string;
transform?: Transform;
classes?: string[];
styles?: { [key: string]: string };
}