Font-awesome: 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 https://github.com/FortAwesome/Font-Awesome/issues/14199#issuecomment-436075894