or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdduotone-icons.mdicon-components.mdicon-layers.mdicon-stacks.mdindex.mdlibrary-management.md
tile.json

tessl/npm-fortawesome--angular-fontawesome

Official Angular component for Font Awesome 5+ providing a comprehensive set of components for rendering icons, layers, and stacks

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@fortawesome/angular-fontawesome@3.0.x

To install, run

npx @tessl/cli install tessl/npm-fortawesome--angular-fontawesome@3.0.0

index.mddocs/

Angular FontAwesome

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.

Package Information

  • Package Name: @fortawesome/angular-fontawesome
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core

Core Imports

import { 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';

Basic Usage

Standalone Components (Angular 14+)

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);
  }
}

Traditional Modules

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>

Architecture

Angular FontAwesome is built around several key components:

  • FontAwesome Module: Main Angular module that imports and exports all components and services for traditional module-based applications
  • Icon Components: Core rendering components (FaIconComponent, FaDuotoneIconComponent)
  • Layout Components: Composition components for complex layouts (FaLayersComponent, FaStackComponent)
  • Icon Library: Service for managing and caching icon definitions
  • Configuration Service: Global settings and customization options
  • Type System: Full TypeScript integration with extensive type definitions

Capabilities

Icon Rendering

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;
}

Icon Components

Duotone Icons

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;
}

Duotone Icons

Icon Layers

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';
}

Icon Layers

Icon Stacks

Stacked icon compositions for creating multi-layered icons with foreground and background elements.

interface FaStackComponent {
  size?: SizeProp;
}

interface FaStackItemSizeDirective {
  stackItemSize: '1x' | '2x';
}

Icon Stacks

Library Management

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;
}

Library Management

Configuration

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
}

Configuration

Core Types

// 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 };
}