Cannot add custom icons in Angular due to typing

[rooby]

I'm trying to add custom icons to the library with code like this:

library.add({
  "prefix": "custom-icons",
  "iconName": "my-icon",
  "icon": {
    512,
    512,
    [],
    "e001",
    "Some SVG path"
  }
});

If I can work around the compilation errors it does actually work but it throws a bunch of type errors like this:

error TS2345: Argument of type '{ "prefix": string; "iconName": string; "icon": (string | number | any[])[]; }' is not assignable to parameter of type 'IconDefinitionOrPack'.
Type '{ "prefix": string; "iconName": string; "icon": (string | number | any[])[]; }' is not assignable to type 'IconPack'.
Property '"prefix"' is incompatible with index signature.
Type 'string' is not assignable to type 'IconDefinition'.

If I
import { IconDefinition } from "@fortawesome/fontawesome-svg-core"

and then create my icon object using that type then I still get similar errors:

... is not assignable to type 'IconDefinition'
Types of property 'prefix' are incompatible
Type '"custom-icons"' is not assignable to type 'IconPrefix'

Looking at the common types in https://github.com/FortAwesome/Font-Awesome/blob/master/advanced-options/use-with-node-js/fontawesome-common-types/index.d.ts
I see that IconPrefix and IconName are defined as a fixed set of string values, which means that you can only override existing icons and cannot add new ones.

If I change the prefix and name in my code to strings in the allowed values list the errors all go away.

Could we potentially come up with an alternative typing that allows the use of custom icon prefixes and names?

[rooby]

It's possible that we could do something along the lines of adding an interface for a CustomIconDefinition or CustomIconLookup and then allowing the custom version to be used wherever the normal version can be used, however that seems like it might be adding unnecessary complexity since as far as I can tell that would have the same outcome as just changing IconPrefix and IconName to accept any string.

Maybe IconPrefix could include an extra option "custom", which people could use, but you would still have to allow IconName to use any string.

[rooby]

It has been brought to my attention that I use type assertions as a workaround (as below), although ideally one wouldn't have to do this.

import { IconDefinition, IconName, IconPrefix } from "@fortawesome/fontawesome-svg-core"

export const myIcon: IconDefinition = {
  "prefix": <IconPrefix>"my-prefix",
  "iconName": <IconName>"my-icon",
  "icon": [
    444,
    512,
    [],
    "e001",
    "My SVG path"
  ]
};

[Tschrock]

I'm also having this issue when trying to add custom icons as per https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome#with-webpack. Interestingly, that section has a Note: Instructions are different for TypeScript but then doesn't say what's different.

@tagliala I see you marked this as 'waiting for feedback', but I don't see any questions or requests for feedback here. What feedback are you looking for?

[tagliala]

@Tschrock we are waiting for feedback from the community itself

Note: Instructions are different for TypeScript

I should have written instructions does not work for TypeScript

Anyway, please giva a try to #14199 (comment)

[mistic100]

I once resolved the problem by adding "as any" when registering the icon.

But now on Angular 11 witch suggests to enforce strict template type check it breaks again when using the Angular component.

<fa-icon [icon]="['fac', 'my-icon']"></fa-icon>

error TS2322: Type '"fac"' is not assignable to type 'IconPrefix'.

---

IconPrefix should not enforce values if it the library is willing to allow custom icons.

You could use this definition to provide hints but don't lock the user out :

export type IconPrefix = "fas" | "fab" | "far" | "fal" | "fad" | string;

[Hornet-Wing]

I've recently come across this issue too. My current solution was to override the definitions in a shims file, shown below. It would however, be good to have a native solution to this problem.

shims-fontawesome.d.ts

declare module '@fortawesome/fontawesome-common-types' {
  export interface IconLookup {
    prefix: 'fas' | 'fab' | 'far' | 'fal' | 'fad' | 'fac';
    iconName: string;
  }

  export interface IconDefinition extends IconLookup {
    icon: [
      number, // width
      number, // height
      string[], // ligatures
      string, // unicode
      string | string[] // svgPathData
    ];
  }
}

customIcons.ts

import { IconDefinition } from "@fortawesome/fontawesome-common-types";

export const myIcon: IconDefinition = {
  prefix: 'fac',
  iconName: 'my-icon',
  icon: [
    444,
    512,
    [],
    'e001',
    'M432, ...'
  ]
};

[julesdelarue]

Had the same issue, my workaround was for Angular 10

customIcon.ts

export const customIcons:IconDefinition[] = [
  {
    prefix: "fac" as IconPrefix,
    iconName:"myName" as IconName,
    icon:[
      346,          // viewBox width
      268,          // viewBox height
      [],           // ligatures
      "e125", ...
  }
]

And in templates :

<fa-icon [icon]="[$any('fac'), $any('myName')]"></fa-icon>

to avoid

error TS2322: Type '"fac"' is not assignable to type 'IconPrefix'.
error TS2322: Type '"myName"' is not assignable to type 'IconName'.

[shubham-shrivastava]

Facing the same issue with ivy language service.
I have some custom icon defined and it throws an error when enabling strictTemplate check.
Getting - Type '"xyz"' is not assignable to type 'IconPrefix'.

I am using 0.8.2v of the library and Angular 11.

[mehdibenhamouche]

try some thing like this,

public analysisIcon = (['fac', 'analysis'] as unknown) as [IconPrefix, IconName]; TS

<fa-icon [icon]="analysisIcon"></fa-icon> HTML

It works for me!