Customized icons with PRO

[wonaGuillermo]

Hi, I understand that the kits do not work well with Angular and my question is how to use custom icons if I can't use the kits but the PRO icons?

[devoto13]

Here is an example. You could also check out #172.

[wonaGuillermo]

But that would not allow me to use the fontawesome site to upload my SVGs, I would have to do all the work from my Angular project or am I wrong?

If so, I lose one of the features for which I decided to pay for PRO.

[devoto13]

But that would not allow me to use the fontawesome site to upload my SVGs, I would have to do all the work from my Angular project or am I wrong?

Yes, this suggestion is only applicable for icons defined in the code.

I'm not sure what exactly is the problem you're facing. If the problem is specifically that custom icon definition is not assignable to IconDefinition type used by this library, you can workaround it in a similar fashion faUser as IconDefinition and use Kits.

If the problem is the bug in the Kit packages described in #423 (comment), I would suggest to reach out to https://fontawesome.com/support and ask them to prioritise fixing the bug. I'm not an employee and I just maintain this open-source component, so not much I can do about it.

[wonaGuillermo]

I understand, I have already written an email to support. While I don't expect a quick solution, I don't know how to convert my SVGs to code to use your proposed solution.

I still appreciate your response.

[devoto13]

Here is a similar question, could give you some hints. Also, check out https://docs.fontawesome.com/web/add-icons/upload-icons/prep-icons. Say, this is the icon:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
</svg>

Then this would be a definition:

[
  512, // viewBox width
  512, // viewBox height
  [], // ligatures, can be empty array
  'f030', // unicode symbol, can be anything as not used in SVG approach
  'M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z' // icon path, string or [string, string] for duotone icons
]

Hope it helps.

[wonaGuillermo]

Thanks, I will try the solution

[devoto13]

#436 and #438 should lift the limitations related to the custom icons in the angular-fontawesome. The remaining part is broken types in the Kit itself - let's track it in the #423.