spartacus storefront - how to configure new fontawesome icon to use it with ICON_TYPE enum

Question

need to configure new fontawesome icon, as defined in below url. https://github.com/SAP/spartacus/blob/7a590dcee2e3cb3fee7a148c88adde2ab9adda6d/projects/storefrontlib/src/cms-components/misc/icon/fontawesome-icon.config.ts icon: fa fa-microphone

Please help.

Answer 1

You can configure the icon type with the ConfigModule. There are various ways to do so, I'm showing you an example with a so-called provider, but you can also use the ConfigModule or StorefrontModule to so.

providers: [
  provideConfig({
    icon: { symbols: { MIC: 'fas fa-microphone' } }
  } as IconConfig)
]

Please not that I'm using the fontawesome version that has already been imported in Spartacus. If you switch to an alternative resource you must register the resource. You can read more about this at the documentation: https://sap.github.io/spartacus-docs/icon-library/

You can then use the new icon type in a component:

<cx-icon type="MIC"></cx-icon>

or as a directive:

<button cxIcon="MIC">I LIKE IT LOUD</button>

In order to use the icon directive, you need to import the IconModule in the Angular module that host your component.