How To Change Default Icon For Menu Items in Magento 2 Backend

May 10, 2021 The Online Helper

In this tutorial, we will show you how to change the custom menu icon in Magento 2.

There are only five steps you need to follow,

Create menu
Add CSS file
Upload icon
Default.xml file
Run commands

Step#1: Create Menu

create menu.xml file in the below directory

app/code/TOH/HelloWorld/etc/adminhtml/menu.xml

Now copy the below code and paste it to the menu.xml file

<?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="TOH_HelloWorld::helloworld" title="Hello World" module="TOH_HelloWorld" sortOrder="51" 
              resource="TOH_HelloWorld::helloworld"/>

 <add id="TOH_HelloWorld::post" title="Manage Posts" module="TOH_HelloWorld" sortOrder="10" 
              action="TOH_helloworld/post" resource="TOH_HelloWorld::post" parent="TOH_HelloWorld::helloworld"/>

    </menu>

</config>

Step#2: Add CSS

app/code/TOH/HelloWorld/view/adminhtml/web/css/style.css

add the below code in the style.css file in the above directory

.admin__menu .level-0.item-helloworld > a:before {
content: url('../images/logo.svg'); 
height: 28px;
margin: 0 auto;
width: 30px;
}

Step#3: Add icon

upload your icon in the below directory

app/code/TOH/HelloWorld/view/adminhtml/web/Images/

Step#4: Default.xml

Create the Default.xml file and paste 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="TOH_HelloWorld::css/style.css"/>
</head>
</page>

Step#5: Run Commands

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

If you are looking for Magento 2 eCommerce websites, visit Magento 2 Services.