Variable icon name

What if you are designing a theme, you are using alert icon and you want that icon to be configurable?

Typically you'd need to use some variable in whatever template system you are using, something like this:

<span class="iconify icon-alert" data-icon="{{ icons.alert }}"></span>

Where icon name is taken from "icons" object.

But what if you can't use template engine to configure variable icon names, but you still want to easily change icons in multiple places?

There is a different solution. You can do the same using Iconify plugin system.

Writing a plugin

Add something like this to your JavaScript. Make sure it is added after Iconify code.

Iconify.addTag('custom-icon', true, function(element) {
    switch (element.getAttribute('data-icon')) {
        case 'alert': return 'mdi-alert';
        case 'login': return 'fa-sign-in';
        // Put here the rest of custom icon aliases

        default:
            // Log error, return "?" icon
            console.log('Unknown icon:', element.getAttribute('data-icon'));
            return 'vaadin-question';
    }
});

That's it. It is very simple.

That code will add custom tag custom-icon you can use instead of iconify-icon.

Inside switch() your code should return real icon name for icon alias.

How to use it in HTML

After adding plugin above you can write code like this:

<custom-icon class="icon-alert" data-icon="alert"></custom-icon>

It will be handled exactly the same as this:

<span class="iconify icon-alert" data-icon="mdi-alert" data-inline="true"></span>

"alert" will be replaced with "mdi-alert" (see switch() statement), class "iconify" will be added to list of classes, "data-inline" attribute will be set to "true" (second parameter to addTag function, you can change it by adding your own data-inline attribute)

This method cannot be used in CSS. For variable icon names in CSS use pre-processor such as Sass or Less.