How To Change Default Icon For Menu Items in Magento 2 Backend
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:
- Create Menu app/code/Meetanshi/HelloWorld/etc/adminhtml/menu.xml
12345678<?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> - Create app/code/Meetanshi/HelloWorld/view/adminhtml/web/css/helloworld.css file with the following code
123456.admin__menu .level-0.item-helloworld > a:before {content: url('../images/meetanshi.svg');height: 28px;margin: 0 auto;width: 30px;} - Upload your icon to app/code/Meetanshi/HelloWorld/view/adminhtml/web/images/
- Create app/code/Meetanshi/HelloWorld/view/adminhtml/layout/default.xml file with the following code
123456<?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> - Run following commands
12php bin/magento setup:static-content:deploy -f --area adminhtmlphp bin/magento cache:clean
That’s it.
The custom menu item icon in the backend:
Feel free to ask any doubts in the Comments section below and I’d be happy to help.
Please share the above solution with as many developers as possible via social media platforms.
Thank you.
Prev
How to Get Custom Customer Attribute Value in Magento 2
How to Send Custom Emails Programmatically in Magento 2
Next