Use sidebar nav icons in modules and plugins

When adding a navigation item, there is the option to specify an icon, but it seems to have to be a path to an SVG. I can see that Craft has its own icon library, and it has an icon I want to use.

I want to use the “mail” icon, so I tried this HTML:

'icon' => '<span data-icon="mail"></span>',

this is inside my registration of the navigation item:

Event::on(
    Cp::class,
    Cp::EVENT_REGISTER_CP_NAV_ITEMS,
    function(RegisterCpNavItemsEvent $event) {
        $event->navItems[] = [
            'url' => 'contact-enquiries',
            'label' => 'Contact Enquiries',
            'icon' => '<span data-icon="mail"></span>',
        ];
    }
);

However, it doesn’t show the icon.

I can’t see anywhere in the docs that explain how to use these icons in your own navigation items, so is there a way to do it? It’d be a lot easier than having to include an SVG that doesn’t match the other icons.

Leave a Reply

Your email address will not be published. Required fields are marked *