How to customize core components in Spartacus?

Question

Is it possible to customize core Spartacus components like cx-icon? I need to extend cx-icon to add functionality to support Material Icons, so whenever I use cx-icon in the app, Material Icons are rendered and not FontAwesome icons

PS - Material icons cannot be configured in cx-icon as it doesn't use CSS classes like FontAwesome, rather it uses text ligatures

Artem Zur Artem Zur · Accepted Answer · 2020-06-09T08:46:12

I'm not sure, but you can try to figure it out with SVG sprite. You just need to download Material Icons in SVG sprite format (more details here https://google.github.io/material-design-icons/) and to configure IconModule with custom matIconConfig like this (more details here https://sap.github.io/spartacus-docs/icon-library/):

export const matIconConfig: IconConfig = {
  icon: {
    symbols: {
      INFO: 'info', // Here you should add actual xlink to SVS symbol
    },
    resources: [
      {
        type: IconResourceType.SVG,
        url: './assets/mat-icons.svg',
        types: [ICON_TYPE.INFO],
      },
    ],
  },
};

And then merge it to global configuration by:

ConfigModule.withConfig(matIconConfig);

Of course, during debugging, maybe you will need to apply some additional styles, but I can't provide which exactly.

How to customize core components in Spartacus?

1 Answers