v2.1.0 - FontAwesome v7 support

README.md

@@ -12,6 +12,11 @@ Official Angular component for Font Awesome 5+
 
 If you have [FontAwesome Pro](https://fontawesome.com/plans) subscription, make sure to [configure access](https://fontawesome.com/docs/web/setup/packages#_1-configure-access) before following the installation instructions.
 
+> **Note:** Pro+ Icons are only available in Kit Packages
+> Along with a Pro+ Plan, you'll need to install a downloaded Kit package to use any of our Pro+ Icons — they are not available in any other packages.
+> [Read more](https://docs.fontawesome.com/web/setup/use-kit#using-kit-packages).
+
+
 Using `ng add`:
 
 ```
@@ -35,24 +40,25 @@ $ npm install @fortawesome/angular-fontawesome@<version>
 
 ### Compatibility table
 
-| @fortawesome/angular-fontawesome | Angular    | Font Awesome | ng-add        |
-|----------------------------------|------------|--------------|---------------|
-| 0.1.x                            | 5.x        | 5.x          | not supported |
-| 0.2.x                            | 6.x        | 5.x          | not supported |
-| 0.3.x                            | 6.x && 7.x | 5.x          | not supported |
-| 0.4.x, 0.5.x                     | 8.x        | 5.x          | not supported |
-| 0.6.x                            | 9.x        | 5.x          | supported     |
-| 0.7.x                            | 10.x       | 5.x          | supported     |
-| 0.8.x                            | 11.x       | 5.x          | supported     |
-| 0.9.x                            | 12.x       | 5.x          | supported     |
-| 0.10.x                           | 13.x       | 5.x && 6.x   | supported     |
-| 0.11.x                           | 14.x       | 5.x && 6.x   | supported     |
-| 0.12.x                           | 15.x       | 5.x && 6.x   | supported     |
-| 0.13.x                           | 16.x       | 5.x && 6.x   | supported     |
-| 0.14.x                           | 17.x       | 5.x && 6.x   | supported     |
-| 0.15.x                           | 18.x       | 5.x && 6.x   | supported     |
-| 1.x                              | 19.x       | 5.x && 6.x   | supported     |
-| 2.x                              | 20.x       | 5.x && 6.x   | supported     |
+| @fortawesome/angular-fontawesome | Angular    | Font Awesome      | ng-add        |
+|----------------------------------|------------|-------------------|---------------|
+| 0.1.x                            | 5.x        | 5.x               | not supported |
+| 0.2.x                            | 6.x        | 5.x               | not supported |
+| 0.3.x                            | 6.x && 7.x | 5.x               | not supported |
+| 0.4.x, 0.5.x                     | 8.x        | 5.x               | not supported |
+| 0.6.x                            | 9.x        | 5.x               | supported     |
+| 0.7.x                            | 10.x       | 5.x               | supported     |
+| 0.8.x                            | 11.x       | 5.x               | supported     |
+| 0.9.x                            | 12.x       | 5.x               | supported     |
+| 0.10.x                           | 13.x       | 5.x && 6.x        | supported     |
+| 0.11.x                           | 14.x       | 5.x && 6.x        | supported     |
+| 0.12.x                           | 15.x       | 5.x && 6.x        | supported     |
+| 0.13.x                           | 16.x       | 5.x && 6.x        | supported     |
+| 0.14.x                           | 17.x       | 5.x && 6.x        | supported     |
+| 0.15.x                           | 18.x       | 5.x && 6.x        | supported     |
+| 1.x                              | 19.x       | 5.x && 6.x        | supported     |
+| 2.x                              | 20.x       | 5.x && 6.x        | supported     |
+| 2.1.x                            | 20.x       | 5.x && 6.x && 7.x | supported     |
 
 ## Usage
 
@@ -66,6 +72,10 @@ To get up and running using Font Awesome with Angular follow the below steps:
     import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
+   // Import from Kit Packages (Pro+ Icons)
+   // import {faCloud} from "@awesome.me/kit-<KIT_ID>/icons/slab/regular";
+
+
     @Component({
       selector: 'app-root',
       imports: [FontAwesomeModule], // alternatively, individual components can be imported

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fortawesome/angular-fontawesome",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Angular Fontawesome, an Angular library",
   "scripts": {
     "ng": "ng",
@@ -45,8 +45,8 @@
     "@angular/platform-server": "^20.0.0",
     "@angular/router": "^20.0.0",
     "@angular/ssr": "^20.0.0",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
     "@types/express": "^4.17.21",
     "@types/jasmine": "~4.3.6",
     "@types/node": "~22.9.1",
@@ -78,7 +78,7 @@
     "zone.js": "~0.15.1"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
     "tslib": "^2.8.1"
   },
   "keywords": [
@@ -93,5 +93,5 @@
     "@angular/core": "^20.0.0"
   },
   "schematics": "./schematics/collection.json",
-  "packageManager": "yarn@4.5.1"
+  "packageManager": "yarn@4.9.2"
 }

projects/demo/src/app/app.component.html

@@ -3,6 +3,13 @@ <h1>Font Awesome examples</h1>
 <h3>Icon as Object (with title attribute—inspect the DOM to see it)</h3>
 <fa-icon [icon]="faCoffee" title="Coffee: Best Drink Ever"></fa-icon>
 
+<h3>New v7 Icons</h3>
+<div style="display: flex; flex-direction: row; gap: 10px;">
+  <fa-icon [icon]="faSpiral" [title]="'Spiral'"></fa-icon>
+  <fa-icon [icon]="faBusSide"></fa-icon>
+  <fa-icon [icon]="faSeptagon"></fa-icon>
+</div>
+
 <h3>Icon looked up in library by name</h3>
 <p>
   Possible after adding the <code>faUser</code> icon from the <code>free-solid-svg-icons</code> package to the library.

projects/demo/src/app/app.component.ts

@@ -18,6 +18,9 @@ import {
   faSquare,
   faTimes,
   faUser,
+  faBusSide,
+  faSpiral,
+  faSeptagon
 } from '@fortawesome/free-solid-svg-icons';
 import { AlternatePrefixComponent } from './alternate-prefix.component';
 
@@ -44,6 +47,12 @@ export class AppComponent {
   faBatteryQuarter = faBatteryQuarter;
   faHeart = faHeart;
   faSpinner = faSpinner;
+
+  // V7 Icons
+  faBusSide = faBusSide;
+  faSpiral = faSpiral;
+  faSeptagon = faSeptagon;
+
   faDummy: IconDefinition = {
     prefix: 'fad',
     iconName: 'dummy',

projects/schematics/src/ng-add/index.ts

@@ -12,7 +12,7 @@ import { getAppModulePath, isStandaloneApp } from '@schematics/angular/utility/n
 import { getMainFilePath } from '@schematics/angular/utility/standalone/util';
 import { getWorkspace } from '@schematics/angular/utility/workspace';
 import { Schema } from './schema';
-import { angularFontawesomeVersion, iconPackVersion, v5 } from './versions';
+import { angularFontawesomeVersion, iconPackVersionMap } from './versions';
 
 export default function (options: Schema): Rule {
   return chain([
@@ -28,7 +28,7 @@ export default function (options: Schema): Rule {
         addPackageJsonDependency(tree, {
           type: NodeDependencyType.Default,
           name: `@fortawesome/${pack}-svg-icons`,
-          version: options.version === '6' ? iconPackVersion : v5.iconPackVersion,
+          version: iconPackVersionMap[options.version as string].iconPackVersion,
         });
       }
 

projects/schematics/src/ng-add/schema.json

@@ -14,11 +14,15 @@
     "version": {
       "description": "The FontAwesome version to install.",
       "type": "string",
-      "default": "6",
+      "default": "7",
       "x-prompt": {
         "message": "Choose Font Awesome version you would like to use:",
         "type": "list",
         "items": [
+          {
+            "value": "7",
+            "label": "Font Awesome 7"
+          },
           {
             "value": "6",
             "label": "Font Awesome 6"
@@ -42,9 +46,19 @@
           "pro-solid",
           "pro-regular",
           "pro-light",
-          "pro-duotone",
           "pro-thin",
-          "sharp-solid"
+          "pro-duotone",
+          "duotone-regular",
+          "duotone-light",
+          "duotone-thin",
+          "sharp-solid",
+          "sharp-regular",
+          "sharp-light",
+          "sharp-thin",
+          "sharp-duotone-solid",
+          "sharp-duotone-regular",
+          "sharp-duotone-light",
+          "sharp-duotone-thin"
         ]
       },
       "default": ["free-solid"],

projects/schematics/src/ng-add/schema.ts

@@ -3,7 +3,7 @@ export interface Schema {
   project?: string;
 
   /** The FontAwesome version to install. */
-  version?: '5' | '6';
+  version?: '5' | '6' | '7' ;
 
   /** The icon packages to install */
   iconPackages?: (

projects/schematics/src/ng-add/versions.ts

@@ -4,3 +4,9 @@ export const iconPackVersion = '^6.7.2';
 export const v5 = {
   iconPackVersion: '^5.15.4',
 };
+
+export const iconPackVersionMap: Record<string, { iconPackVersion: string }> = {
+  '7': { iconPackVersion: '^7.0.0' },
+  '6': { iconPackVersion: '^6.7.2' },
+  '5': { iconPackVersion: '^5.15.4' },
+};

src/lib/icon/icon.component.ts

@@ -31,7 +31,7 @@ import { IconDefinition, IconProp } from '../types';
   template: ``,
   host: {
     class: 'ng-fa-icon',
-    '[attr.title]': 'title()',
+    '[attr.title]': 'title() ?? undefined',
     '[innerHTML]': 'renderedIconHTML()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

yarn.lock

@@ -2104,9 +2104,9 @@ __metadata:
     "@angular/platform-server": "npm:^20.0.0"
     "@angular/router": "npm:^20.0.0"
     "@angular/ssr": "npm:^20.0.0"
-    "@fortawesome/fontawesome-svg-core": "npm:^6.7.2"
-    "@fortawesome/free-regular-svg-icons": "npm:^6.7.2"
-    "@fortawesome/free-solid-svg-icons": "npm:^6.7.2"
+    "@fortawesome/fontawesome-svg-core": "npm:^7.0.0"
+    "@fortawesome/free-regular-svg-icons": "npm:^7.0.0"
+    "@fortawesome/free-solid-svg-icons": "npm:^7.0.0"
     "@types/express": "npm:^4.17.21"
     "@types/jasmine": "npm:~4.3.6"
     "@types/node": "npm:~22.9.1"
@@ -2142,37 +2142,37 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@fortawesome/fontawesome-common-types@npm:6.7.2":
-  version: 6.7.2
-  resolution: "@fortawesome/fontawesome-common-types@npm:6.7.2"
-  checksum: 10c0/0785df560542d9c08a0ba07bb7a39902274a3cd65c018672eb2520a99efccce18bdb7f7f4b1c6089763bc5627bf0f0837c3af963a8427eaeb535bd57c820a723
+"@fortawesome/fontawesome-common-types@npm:7.0.0":
+  version: 7.0.0
+  resolution: "@fortawesome/fontawesome-common-types@npm:7.0.0"
+  checksum: 10c0/e9c3a77d11e537212b734badf5cfa5f7828ac4e2d74692a3078113e226f31abcf37cb7a3187d5eebd7fc1c819ddea8ad9383f24d033dba3d2aeec79e92e28dd7
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-svg-core@npm:^6.7.2":
-  version: 6.7.2
-  resolution: "@fortawesome/fontawesome-svg-core@npm:6.7.2"
+"@fortawesome/fontawesome-svg-core@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@fortawesome/fontawesome-svg-core@npm:7.0.0"
   dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:6.7.2"
-  checksum: 10c0/9e4e2992b341d2d11cd6ab8cf001e2cb9be4266ce200b307d15c0618e7d2cf11c1c4c67a1f95f3cc70feed2380fa66672132c32078674d5f9cb2cb0b7703f3ac
+    "@fortawesome/fontawesome-common-types": "npm:7.0.0"
+  checksum: 10c0/abeff7307874b11e096496418516b2cb120e6aee358def639915fbf2a31bbd4df243ecdde04ed9c74c454e0a3fc90331131572b600d58acd973d3e62d39c7db9
   languageName: node
   linkType: hard
 
-"@fortawesome/free-regular-svg-icons@npm:^6.7.2":
-  version: 6.7.2
-  resolution: "@fortawesome/free-regular-svg-icons@npm:6.7.2"
+"@fortawesome/free-regular-svg-icons@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@fortawesome/free-regular-svg-icons@npm:7.0.0"
   dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:6.7.2"
-  checksum: 10c0/3a334cb0c837170f7b14759ddc8ef2a821b8d2c59b23a7b852d7e3fb16b066dd5fe8649e47bc1ef91764c78a78f51d1c0c8c5b8567e1680eeb21e8afdc70f5f7
+    "@fortawesome/fontawesome-common-types": "npm:7.0.0"
+  checksum: 10c0/676b4a57fdb3a250bcc02094dd2e04f54f2ac742569c43fadffaf8ede53ae3b10ccc78db5037802f6c6e9e544cec936ed30e0d41954a25bfe5fdd89226176560
   languageName: node
   linkType: hard
 
-"@fortawesome/free-solid-svg-icons@npm:^6.7.2":
-  version: 6.7.2
-  resolution: "@fortawesome/free-solid-svg-icons@npm:6.7.2"
+"@fortawesome/free-solid-svg-icons@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "@fortawesome/free-solid-svg-icons@npm:7.0.0"
   dependencies:
-    "@fortawesome/fontawesome-common-types": "npm:6.7.2"
-  checksum: 10c0/e900f3bb7b7d821421f11439ff78cd2b3c98ca31e848e1afebf7caa578d29a31fb6cf8ef283d4df342de777126a71fcbb154dd395b9d9ab6914a40a86df81413
+    "@fortawesome/fontawesome-common-types": "npm:7.0.0"
+  checksum: 10c0/116560ba8682c9fe0e157347418fa6a30b35e5288fa138cb46492efaa1fc1ae13aa0e75f1f51c2068f2978c95ea17797eaeab55b913d0bc7cad5ed3a0ea2fac0
   languageName: node
   linkType: hard
 
@@ -12933,11 +12933,11 @@ __metadata:
 
 "typescript@patch:typescript@npm%3A~5.8.3#optional!builtin<compat/typescript>":
   version: 5.8.3
-  resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=cef18b"
+  resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=5786d5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/92ea03509e06598948559ddcdd8a4ae5a7ab475766d5589f1b796f5731b3d631a4c7ddfb86a3bd44d58d10102b132cd4b4994dda9b63e6273c66d77d6a271dbd
+  checksum: 10c0/39117e346ff8ebd87ae1510b3a77d5d92dae5a89bde588c747d25da5c146603a99c8ee588c7ef80faaf123d89ed46f6dbd918d534d641083177d5fac38b8a1cb
   languageName: node
   linkType: hard