Enhancement: Add Custom Icons to mt-icon Component

[runelaenen]

I would like to request a feature that allows the ability to add and render custom icons easily within the mt-icon component. In the previous version (sw-icon in the Shopware codebase), as a user I was able to extend the component and load custom icons from within my Shopware Administration application.

The mt-icon component was created differently compared to sw-icon, which has led to this not being possible anymore as far as I can see. Currently, there is no documented way to load custom icons with mt-icon. For users who have specific design or branding needs, the ability to add custom icons is essential.

[runelaenen]

Just for extra information, with sw-icon it was very easy to add custom icons by overriding the component like this.

Shopware.Component.override('sw-icon-deprecated', {
    methods: {
        loadIconSvgData(variant, iconName, iconFullName) {
            if (variant === 'xyz') { // Only handle our custom icon names
                return import(`./icons/${variant}/${iconName}.svg`).then((iconSvgData) => {
                    if (iconSvgData.default) {
                        this.iconSvgData = iconSvgData.default;
                    } else {
                        // note this only happens if the import exists but does not export a default
                        console.error(`The SVG file for the icon name ${iconFullName} could not be found and loaded.`);
                        this.iconSvgData = '';
                    }
                });
            }

            return this.$super('loadIconSvgData', variant, iconName, iconFullName);
        },
    },
})

[Haberkamp]

Hi, we do not plan on adding this feature. We think the effort is too high for the value it creates. You have two options: 1. You build your own icon component or 2. you can request a specific icon and we evaluate if it makes sense to add it to the Meteor Icon Kit.