1

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.

3

You were almost there with it. You need to specify a path to an SVG. It can be one of the ones that exists within Craft's icon directory.

So your nav item would look like this:

Event::on(
    Cp::class,
    Cp::EVENT_REGISTER_CP_NAV_ITEMS,
    function(RegisterCpNavItemsEvent $event) {
        $event->navItems[] = [
            'url' => 'contact-enquiries',
            'label' => 'Contact Enquiries',
            'icon' => '@app/icons/envelope.svg',
        ];
    }
);

And this is how it will show in the CP nav:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.