The Magento 2 platform allows the developers to develop and add custom modules in the store to avail the extended functionality either for improved customer experience or easy administration task. These custom modules can be accessed from the Magento 2 admin panel.
Now, these custom modules are assigned the “hexagonal” icon by default as shown in the image below:
However, you can change default icon for menu items in Magento 2 backend and the post gives the programmatic method for the same.
Why would you do so?
The reasons for changing the default icon in the menu for a custom module in Magento 2 backend are:
- Symbolic representation for reflecting the functionality is always a good thing to do!
- Branding with the custom icon of your company
- The fellow admins or store owner can get the overview of the module with a custom icon and easily understand it.
- Differentiating the custom modules from the default ones
- Unique and cool visual appearance with an attractive appeal
Owing to the above reasons, you may take the efforts to follow the below method to customize the menu items’ icons for custom modules in the admin panel of Magento 2:
Method to Change Default Icon for Menu Items in Magento 2 Backend:
1. Create app/code/Meetanshi/HelloWorld/etc/adminhtml/menu.xml
<?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="Meetanshi_HelloWorld::helloworld" title="Hello World" module="Meetanshi_HelloWorld" sortOrder="51" resource="Meetanshi_HelloWorld::helloworld"/>
<add id="Meetanshi_HelloWorld::post" title="Manage Posts" module="Meetanshi_HelloWorld" sortOrder="10" action="meetanshi_helloworld/post" resource="Meetanshi_HelloWorld::post" parent="Meetanshi_HelloWorld::helloworld"/>
<add id="Meetanshi_HelloWorld::hello_configuration" title="Configuration" module="Meetanshi_HelloWorld" sortOrder="99" parent="Meetanshi_HelloWorld::helloworld" action="adminhtml/system_config/edit/section/helloworld" resource="Meetanshi_HelloWorld::helloworld_configuration"/>
</menu>
</config>
2. Create app/code/Meetanshi/HelloWorld/view/adminhtml/web/css/helloworld.css file with the following code:
.admin__menu .level-0.item-helloworld > a:before {
content: url('../images/meetanshi.svg');
height: 28px;
margin: 0 auto;
width: 30px;
}
3. Upload your icon to app/code/Meetanshi/HelloWorld/view/adminhtml/web/images/
4. Create app/code/Meetanshi/HelloWorld/view/adminhtml/layout/default.xml file with the following 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="Meetanshi_HelloWorld::css/helloworld.css"/>
</head>
</page>
5. Run the following commands:
php bin/magento setup:static-content:deploy -f --area adminhtml
php bin/magento cache:cleanThat’s it.
The custom menu item icon in the backend:
Please share the above solution with as many developers as possible via social media platforms.
Thank you.
