Add support for Angular 21

CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ---
+## [4.0.0](https://github.com/FortAwesome/angular-fontawesome/releases/tag/3.1.0) (2025-11-24)
+
+### Added
+
+* Support for Angular 21.
+
+### Removed
+
+* Angular 20.x is no longer supported. If you are using this version, please, stick with version 3.0.0.
 
 ## [3.0.0](https://github.com/FortAwesome/angular-fontawesome/releases/tag/3.0.0) (2025-08-03)
 

README.md

@@ -40,11 +40,12 @@ $ npm install @fortawesome/angular-fontawesome@<version>
 
 ### Compatibility table
 
-| @fortawesome/angular-fontawesome | Angular    | Font Awesome      | 
-|----------------------------------|------------|-------------------|
-| 3.x                              | 20.x       | 5.x && 6.x && 7.x |
-| 2.x                              | 20.x       | 5.x && 6.x        |
-| 1.x                              | 19.x       | 5.x && 6.x        |
+| @fortawesome/angular-fontawesome | Angular | Font Awesome      | 
+|----------------------------------|---------|-------------------|
+| 4.x                              | 21.x    | 5.x && 6.x && 7.x |
+| 3.x                              | 20.x    | 5.x && 6.x && 7.x |
+| 2.x                              | 20.x    | 5.x && 6.x        |
+| 1.x                              | 19.x    | 5.x && 6.x        |
 
 See [the compatibility page](./docs/guide/compatibility.md) for older versions.
 

angular.json

@@ -24,7 +24,7 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "include": ["src/**/*.spec.ts", "testing/src/**/*.spec.ts"],
             "polyfills": ["zone.js", "zone.js/testing"],

docs/guide/adding-css.md

@@ -5,10 +5,12 @@ For Font Awesome icon to render properly, it needs global Font Awesome styles to
 If you have issues with this approach, you can disable it by setting `FaConfig.autoAddCss` to `false`:
 
 ```typescript
+import { inject } from '@angular/core';
 import { FaConfig } from '@fortawesome/angular-fontawesome';
 
 export class AppComponent {
-  constructor(faConfig: FaConfig) {
+  constructor() {
+    const faConfig = inject(FaConfig);
     faConfig.autoAddCss = false;
   }
 }

docs/guide/testing.md

@@ -63,7 +63,7 @@ There are several options how to deal with the icon library in the tests:
 With this approach you would define a new module, which wraps `FontAwesomeModule` and configures an icon library. Then this module can be used instead of `FontAwesomeModule` both in the `AppModule` and test code thus the icon library configuration is shared between application and tests. Below is the example of such wrapper module:
 
 ```typescript
-import { NgModule } from '@angular/core';
+import { inject, NgModule } from '@angular/core';
 import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 
@@ -72,7 +72,8 @@ import { faUser } from '@fortawesome/free-solid-svg-icons';
   exports: [FontAwesomeModule],
 })
 class FontAwesomeIconsModule {
-  constructor(library: FaIconLibrary) {
+  constructor() {
+    const library = inject(FaIconLibrary);
     library.addIcons(faUser);
   }
 }

docs/usage/icon-library.md

@@ -24,7 +24,7 @@ Icons should be registered only once in the `AppComponent`'s constructor using `
 1. Add icon to the library with `library.addIcons(faCoffee)`.
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
@@ -34,8 +34,9 @@ import { faCoffee } from '@fortawesome/free-solid-svg-icons';
   templateUrl: './app.component.html',
 })
 export class AppComponent {
-  constructor(library: FaIconLibrary) {
+  constructor() {
     // Add an icon to the library for convenient access in other components
+    const library = inject(FaIconLibrary);
     library.addIcons(faCoffee);
   }
 }
@@ -49,7 +50,8 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 
 export class AppComponent {
-  constructor(library: FaIconLibrary) {
+  constructor() {
+    const library = inject(FaIconLibrary);
     library.addIconPacks(fas, far);
   }
 }
@@ -62,7 +64,7 @@ A better way can be to use a [Font Awesome Kit](https://fontawesome.com/kits) to
 _In these examples, you would replace "KIT_CODE" with the unique identifier for your Pro Kit_
 
 ```typescript
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { all } from '@awesome.me/kit-KIT_CODE/icons';
 
@@ -72,8 +74,9 @@ import { all } from '@awesome.me/kit-KIT_CODE/icons';
   templateUrl: './app.component.html',
 })
 export class AppComponent {
-  constructor(library: FaIconLibrary) {
+  constructor() {
     // Add an icon to the library for convenient access in other components
+    const library = inject(FaIconLibrary);
     library.addIcons(...all);
   }
 }
@@ -99,7 +102,8 @@ The default prefix, `fas`, can be adjusted by injecting the `FaConfig` and modif
 import { FaConfig } from '@fortawesome/angular-fontawesome';
 
 export class AppComponent {
-  constructor(faConfig: FaConfig) {
+  constructor() {
+    const faConfig = inject(FaConfig);
     faConfig.defaultPrefix = 'far';
   }
 }
@@ -113,7 +117,8 @@ The fixed width class, `fa-fw`, can be applied globally by injecting the `FaConf
 import { FaConfig } from '@fortawesome/angular-fontawesome';
 
 export class AppComponent {
-  constructor(faConfig: FaConfig) {
+  constructor() {
+    const faConfig = inject(FaConfig);
     faConfig.fixedWidth = true;
   }
 }

docs/usage/using-other-styles.md

@@ -124,8 +124,9 @@ import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 
 export class AppModule {
-  constructor(library: FaIconLibrary) {
+  constructor() {
     // Add multiple icons to the library
+    const library = inject(FaIconLibrary);
     library.addIcons(fasStar, farStar);
   }
 }

karma.conf.js

@@ -4,13 +4,12 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    frameworks: ['jasmine'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       clearContext: false, // leave Jasmine Spec Runner output visible in browser

package.json

@@ -29,36 +29,36 @@
   },
   "homepage": "https://github.com/FortAwesome/angular-fontawesome",
   "devDependencies": {
-    "@angular-devkit/build-angular": "patch:@angular-devkit/build-angular@npm%3A20.0.0#~/.yarn/patches/@angular-devkit-build-angular-npm-19.0.0-131974ef98.patch",
-    "@angular-devkit/core": "^20.3.1",
-    "@angular-devkit/schematics": "^20.3.1",
-    "@angular/animations": "^20.3.0",
-    "@angular/build": "^20.3.1",
-    "@angular/cli": "^20.3.1",
-    "@angular/common": "^20.3.0",
-    "@angular/compiler": "^20.3.0",
-    "@angular/compiler-cli": "^20.3.0",
-    "@angular/core": "^20.3.0",
-    "@angular/language-service": "^20.3.0",
-    "@angular/platform-browser": "^20.3.0",
-    "@angular/platform-browser-dynamic": "^20.3.0",
-    "@angular/platform-server": "^20.3.0",
-    "@angular/router": "^20.3.0",
-    "@angular/ssr": "^20.3.1",
-    "@fortawesome/free-regular-svg-icons": "^7.0.0",
-    "@fortawesome/free-solid-svg-icons": "^7.0.0",
-    "@types/express": "^4.17.21",
+    "@angular-devkit/build-angular": "patch:@angular-devkit/build-angular@npm%3A21.0.0#~/.yarn/patches/@angular-devkit-build-angular-npm-19.0.0-131974ef98.patch",
+    "@angular-devkit/core": "^21.0.0",
+    "@angular-devkit/schematics": "^21.0.0",
+    "@angular/animations": "^21.0.0",
+    "@angular/build": "^21.0.0",
+    "@angular/cli": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/language-service": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "@angular/platform-server": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@angular/ssr": "^21.0.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@types/express": "^4.17.25",
     "@types/jasmine": "~4.3.6",
-    "@types/node": "~22.9.1",
-    "@typescript-eslint/eslint-plugin": "^8.33.0",
-    "@typescript-eslint/parser": "^8.33.0",
-    "angular-eslint": "^19.6.0",
+    "@types/node": "~22.9.4",
+    "@typescript-eslint/eslint-plugin": "^8.48.0",
+    "@typescript-eslint/parser": "^8.48.0",
+    "angular-eslint": "^21.0.1",
     "browser-sync": "^3.0.4",
-    "chromedriver": "~137.0.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsdoc": "^46.10.1",
+    "chromedriver": "~142.0.3",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsdoc": "^61.4.1",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "express": "^4.21.2",
     "jasmine-core": "~4.5.0",
@@ -68,17 +68,17 @@
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^20.0.0",
-    "prettier": "3.5.3",
+    "ng-packagr": "^21.0.0",
+    "prettier": "3.6.2",
     "protractor": "~7.0.0",
     "rxjs": "^7.8.2",
     "ts-node": "~10.9.2",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.33.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.0",
     "zone.js": "~0.15.1"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "tslib": "^2.8.1"
   },
   "keywords": [
@@ -90,7 +90,7 @@
     "svg"
   ],
   "peerDependencies": {
-    "@angular/core": "^20.0.0"
+    "@angular/core": "^21.0.0"
   },
   "schematics": "./schematics/collection.json",
   "packageManager": "[email protected]"

projects/demo/karma.conf.js

@@ -4,13 +4,12 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    frameworks: ['jasmine'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       clearContext: false, // leave Jasmine Spec Runner output visible in browser

projects/demo/src/app/alternate-prefix.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FaConfig, FaIconComponent, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faBellSlash, faHandPaper, faUser } from '@fortawesome/free-regular-svg-icons';
 
@@ -9,7 +9,10 @@ import { faBellSlash, faHandPaper, faUser } from '@fortawesome/free-regular-svg-
   providers: [FaConfig],
 })
 export class AlternatePrefixComponent {
-  constructor(faConfig: FaConfig, library: FaIconLibrary) {
+  constructor() {
+    const faConfig = inject(FaConfig);
+    const library = inject(FaIconLibrary);
+
     // Setting the defaultPrefix to far
     faConfig.defaultPrefix = 'far';
     // Adding dynamic icons to library for use

projects/demo/src/app/testing/icon-library.component.spec.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { inject, NgModule } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { FontAwesomeTestingModule } from '@fortawesome/angular-fontawesome/testing';
@@ -56,7 +56,8 @@ describe('IconLibraryComponent', () => {
   exports: [FontAwesomeModule],
 })
 class FontAwesomeIconsModule {
-  constructor(library: FaIconLibrary) {
+  constructor() {
+    const library = inject(FaIconLibrary);
     library.addIcons(faUser);
   }
 }

src/lib/layers/layers-counter.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, input, computed, ChangeDetectionStrategy, DOCUMENT } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, DOCUMENT, inject, input } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { counter, CounterParams } from '@fortawesome/fontawesome-svg-core';
 import { FaConfig } from '../config';
@@ -31,7 +31,7 @@ export class FaLayersCounterComponent {
   private sanitizer = inject(DomSanitizer);
 
   constructor() {
-    faWarnIfParentNotExist(this.parent, 'FaLayersComponent', this.constructor.name);
+    faWarnIfParentNotExist(this.parent, 'FaLayersComponent', 'FaLayersCounterComponent');
   }
 
   protected buildParams(): CounterParams {

src/lib/layers/layers-text.component.ts

@@ -50,7 +50,7 @@ export class FaLayersTextComponent {
   private readonly sanitizer = inject(DomSanitizer);
 
   constructor() {
-    faWarnIfParentNotExist(this.parent, 'FaLayersComponent', this.constructor.name);
+    faWarnIfParentNotExist(this.parent, 'FaLayersComponent', 'FaLayersTextComponent');
   }
 
   /**

testing/src/icon/mock-icon-library.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { FaIconLibraryInterface, IconDefinition, IconName, IconPrefix } from '@fortawesome/angular-fontawesome';
 import { FaTestingConfig } from '../config';
 
@@ -14,7 +14,7 @@ export const ADD_ICON_MESSAGE = 'Attempt to add an icon to the MockFaIconLibrary
   providedIn: 'root',
 })
 export class MockFaIconLibrary implements FaIconLibraryInterface {
-  constructor(private config: FaTestingConfig) {}
+  private config = inject(FaTestingConfig);
 
   addIcons() {
     if (this.config.whenAddingIcons === 'throwError') {