Using FontAwesome Pro in Angular

Question

We're trying to switch out the free font-awesome 5 icons with pro icons in our Angular 10 application. We're currently importing the free fonts by Explicit Reference like so (in component.ts)

import { faLock } from "@fortawesome/free-solid-svg-icons";

However, when using the pro icons it seems that no TypeScript files are provided, no .d.ts or ES module file seems to be included in the @fortawesome/fontawesome-pro npm package.

I know that we can go with the css solution, but we'd like to keep the explicitness and the tree-shaking possibilities, since we're using only a few of the icons.

My question is; is importing the pro icons in TS possible? It seems weird that the free icons allow this but the pro icons do not.

Answer 1

Despite what the font awesome instructions says, you do not want fortawesome/fontawesome-pro package. I thrashed with this as well.

You just need @fortawesome/pro-solid-svg-icons

Then you can import them as you do the free version:

import { faComet } from '@fortawesome/pro-solid-svg-icons';

This is the same solution if you've been thrashing with the two different IconDefinition definitions between free and pro as a result of different fontawesome-common-types.

I think their "Installing the Pro version of Font Awesome" was not intended for people using angular-fontawesome, which is where I got confused.