How To

How to Change Default Custom Extension Menu Icon in Magento 2 Admin

Magento Custom Development is all about customizing the Magento the way you love that allows us to reduce repetitive tasks or add functionality to its core that helps save time and efforts by serving excellent shopping experience to your shoppers. Whether it is frontend or backend, Magento supports seamless customization & integrations to fulfill every business needs. Magento backend is one of the powerful panels that allows you to have full control over all the stuff whether it’s visual or functional. But several times while custom development, the company or developers want to put their own logo in the menu of custom module or extension as part of marketing that helps them to represent their business identity.
Till date, if you have used any of our Magento 2 Extensions or another brand Extension inside your Magento 2 store, you have definitely seen that tiny logo at the top of Magento 2 menu. So, if you are a developer and wants to add your own custom logo at the top of Magento 2 menu here is the quick guide to change Default Custom Extension Menu Icon in Magento 2 Admin.
To add an icon to our Magento 2 menu, first we need to create the “menu.xml” file at below path.
app\code\Vendor\Extension\etc\menu.xml

<pre class="lang:default decode:true">
<?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="Vendor_Extension::menu_id"
             title="Menu Title"
             module="Vendor_Extension"
             sortOrder="10"
             resource="Vendor_Extension::menu_id"/>
    </menu>
</config>
</pre>

Now we need to create “adminhtml.css” file to set our custom style and link for icon and replace “icon.png” link with your icon URL.
app\code\Vendor\Extension\view\adminhtml\web\css\adminhtml.css

<pre class="lang:default decode:true">
.admin__menu .level-0.item-menu_id > a:before {
    content: url('../images/icon.png');
}
li#menu-vendor_extension-menu_id > a > span {
    display: none;
}
</pre>

In last step, we have to link our CSS file by creating “default.xml” file at following path.
app\code\Vendor\Extension\view\adminhtml\layout\default.xml

<pre class="lang:default decode:true">
<?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="Vendor_Extension::css/adminhtml.css"/>
    </head>
</page>
</pre>

That’s it. Simply clear cache and you are done with adding your custom icon at the top of Magento 2 menu.

That’s it for today, Let us know if you are facing an issue while implementing using this code by commenting below.

Happy Coding!

Click to rate this post!

[Total: 11 Average: 4.6]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏

Next How to Pass data from CMS Block to phtml file in Magento 2 »

Previous « Why Customer segmentation is too important for Marketing

View Comments

Priya says:

February 4, 2022 at 12:46 am

Images are showing very big as it extending from sidebar
- Anonymous says:
  
  February 4, 2022 at 12:47 am
  
  Please give details how to set Image sizeand width so ..it will not extend from sidebar