Best Way To Add Custom Icon For Menu In Magento 2 Backend

In this article, we will not just add a menu item to an Admin page but also add a custom icon for it. We all know the main file needed to add menus is the menu.xml file. Apart from this file, there are other files which we need to create. We will also discuss how we can create a custom image icon for our menu. Let’s begin.

Custom Icon

Create a custom Icon

This is an optional step. It is for those who want to create a menu icon and don’t have it with them. You can get free icons from this website www.iconfinder.com. If you want to customize the icon or create a custom one then you can use this website www.flaticon.com. I will use the free website for this project. You will need to download the icon in .svg format. Upload this file under your module view/adminhtml/web/images

menu.xml

As we said before the menu.xml is an important file to add a menu to the existing Magento admin menu list. We will create a simple menu. If someone clicks on it they will be taken to the Catalog product listing page. create a file in your extension under etc/adminhtml/menu.xml and write the below code.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Learningmagento_General::product_list" title="Product List" module="Learningmagento_General" sortOrder="20" resource="Learningmagento_General::product_list"/>
    </menu>
</config>

Styling

The next file we need is a CSS file. Now it depends if you want to go with a .less file you can also do it using a .less way. We will go with CSS. Create a file menu-style.css (you can give any name) under view/adminhtml/web/css/ and add the below code.

.admin__menu #menu-learningmagento-general-product-list > a:before {
    content: url('../images/schoolbook.svg');
    height: 28px;
    margin: 0 auto;
    width: 30px;
}

default.xml

The default.xml file is very important because this file layout is always loaded regardless of any controller call. This file is best for adding something which you need across all pages of admin. Create a default.xml file under view/adminhtml/layout and place the below code.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Learningmagento_General::css/menu-style.css"/>
    </head>
</page>

Deploy and cache clear

Since we have added a CSS file we will need to run the deploy command also If you make any changes in XML files or add any new XML file then we need to clear the cache otherwise it won’t reflect.

php bin/magento setup:static-content:deploy -f --area adminhtml
php bin/magento cache:clean

Conclusion

That’s it you should see your menu with your custom icon. Do check more of our article regarding Magento development.

Best way to add Custom Icon for Menu in Magento 2 Backend

Table of Contents