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.
As per the @fortawesome/angular-fontawesome
upgrade instructions I moved the type imports from @fortawesome/fontawesome-svg-core
to @fortawesome/angular-fontawesome
but I still get the following error:
<code>✘ [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(''));
<code>✘ [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(''));
╵ ~~~~
</code>
✘ [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:
<code>import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
} 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(
'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,
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);
// 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,
return faIconLibrary.getIconDefinition(prefix, name);
<code>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);
}
}
</code>
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
.
Any ideas on how to solve this?