FontAwesome 6 with Angular 18: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconName | IconLookup'

I have updated my Angular project from 17 to 18 and also updated FontAwesome to 6.6.0 and @fortawesome/angular-fontawesome to 0.15.0. I've checked the package-lock.json and all FontAwesome packages use the same version.

The previous version of FontAwesome was 6.5.2 and 0.14.1 of @fortawesome/angular-fontawesome.

As per the @fortawesome/angular-fontawesome upgrade instructions I moved the type imports from @fortawesome/fontawesome-svg-core to @fortawesome/angular-fontawesome but I get the following error:

✘ [ERROR] TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconName | IconLookup'.
  Type 'IconDefinition' is not assignable to type 'IconLookup'.
    Types of property 'prefix' are incompatible.
      Type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/angular-fontawesome/types").IconPrefix' is not assignable to type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/fontawesome-common-types/index").IconPrefix'.
        Type 'string & {}' is not assignable to type 'IconPrefix'. [plugin angular-compiler]

    projects/material-lib/src/lib/util/register-icons.class.ts:43:20:
      43 │     return iconFunc(icon).html.join('');
         ╵                     ~~~~


✘ [ERROR] TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconName | IconLookup'. [plugin angular-compiler]

    projects/material-lib/src/lib/util/register-icons.class.ts:47:54:
      47 │ ...n sanitizer.bypassSecurityTrustHtml(iconFunc(icon).html.join(''));
         ╵                                                 ~~~~

The relevant code that fails to compile:

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import {
  FaIconLibrary,
  IconDefinition,
  IconName,
  IconPrefix,
} from '@fortawesome/angular-fontawesome';
import { icon as iconFunc } from '@fortawesome/fontawesome-svg-core';

export class RegisterFontIcons {
  public static registerMaterialIcons(iconRegistry: MatIconRegistry) {
    // Register the material icon styles
    iconRegistry.registerFontClassAlias(
      'outlined',
      'mat-ligature-font material-icons material-icons-outlined',
    );
  }

  public static registerFontAwesomIcons(iconRegistry: MatIconRegistry) {
    // Set default font set to Font Awesome Solid icons for non-SVG icons
    iconRegistry.setDefaultFontSetClass('fa-solid');
  }

  public static registerFontAwesomSvgIcons(
    iconRegistry: MatIconRegistry,
    sanitizer: DomSanitizer,
    icons: IconDefinition[],
  ) {
    icons.forEach((icon: IconDefinition) => {
      // console.log(icon.prefix, icon.iconName);
      const svg: SafeHtml = RegisterFontIcons.getLiteralSafeSvg(sanitizer, icon);
      if (icon.prefix === 'fas') {
        iconRegistry.addSvgIconLiteral(icon.iconName, svg);
      } else {
        // Only use a namespace for the non-solid icons
        iconRegistry.addSvgIconLiteralInNamespace(icon.prefix, icon.iconName, svg);
      }
    });
  }

  public static getLiteralSvg(icon: IconDefinition): string {
    return iconFunc(icon).html.join('');
  }

  public static getLiteralSafeSvg(sanitizer: DomSanitizer, icon: IconDefinition): SafeHtml {
    return sanitizer.bypassSecurityTrustHtml(iconFunc(icon).html.join(''));
  }

  public static getFontAwesomeIcon(
    faIconLibrary: FaIconLibrary,
    prefix: IconPrefix,
    name: IconName,
  ): IconDefinition {
    return faIconLibrary.getIconDefinition(prefix, name);
  }
}

The functions that fail are getLiteralSvg and getLiteralSafeSvg.

Looking at the definition of IconLookup the following change doesn't work either:

public static getLiteralSvg(icon: IconDefinition): string {
  return iconFunc({ iconName: icon.iconName, prefix: icon.prefix }).html.join('');
}

It gives the following error:

✘ [ERROR] TS2322: Type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/angular-fontawesome/types").IconName' is not assignable to type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/fontawesome-common-types/index").IconName'.
  Type 'string & {}' is not assignable to type 'IconName'. [plugin angular-compiler]

    projects/material-lib/src/lib/util/register-icons.class.ts:43:22:
      43 │     return iconFunc({ iconName: icon.iconName, prefix: icon.prefix...
         ╵                       ~~~~~~~~


✘ [ERROR] TS2322: Type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/angular-fontawesome/types").IconPrefix' is not assignable to type 'import("D:/Project/Frontend/OAKKPortal/OAKKPortal/node_modules/@fortawesome/fontawesome-common-types/index").IconPrefix'.
  Type 'string & {}' is not assignable to type 'IconPrefix'. [plugin angular-compiler]

    projects/material-lib/src/lib/util/register-icons.class.ts:43:47:
      43 │ ...c({ iconName: icon.iconName, prefix: icon.prefix }).html.join('');
         ╵                                 ~~~~~~

Any ideas on how to solve this?

The error you get due to conflict type in different libraries, the types that iconFunc expects are from the @fortawesome/fontawesome-common-types library but not @fortawesome/angular-fontawesome.

The quick solution will be to differentiate the types with different names:

import {
  IconDefinition as CommonIconDefinition,
  IconName as CommonIconName,
  IconPrefix as CommonIconPrefix,
} from '@fortawesome/fontawesome-common-types';

  public static getLiteralSvg(icon: IconDefinition): string {
    return iconFunc({
      iconName: icon.iconName as CommonIconName,
      prefix: icon.prefix as CommonIconPrefix,
    }).html.join('');
  }

  public static getLiteralSafeSvg(
    sanitizer: DomSanitizer,
    icon: IconDefinition
  ): SafeHtml {
    return sanitizer.bypassSecurityTrustHtml(
      iconFunc({
        iconName: icon.iconName as CommonIconName,
        prefix: icon.prefix as CommonIconPrefix,
      }).html.join('')
    );
  }

Another approach is that referring to the @fortawesome/fontawesome-svg-core as angular-fontawesome did, just you need to make the change in your getFontAwesomeIcon method.

import { icon as iconFunc, 
  IconPrefix,
  IconName,
  IconDefinition
} from '@fortawesome/fontawesome-svg-core';

public static getFontAwesomeIcon(
    faIconLibrary: FaIconLibrary,
    prefix: IconPrefix,
    name: IconName
  ): IconDefinition | null {
    return faIconLibrary.getIconDefinition(prefix, name) as IconDefinition;
  }