redirect url
auto redirect to base url magento 2

Change icon module in Magento 2

Megan Nguyen
Posted by Megan Nguyen June 30, 2021

When creating a module in magento 2 you will see a default icon generated. In some cases, you want to create a separate icon for your module to create your own personal brand. Understanding these, this article will introduce you to change the icon for the magento 2 module.

Normally when creating a new menu, you will see the default icon of magento 2 with the following image

icon

Step 1: You need to prepare an image in svg format

Step 2: Copy the downloaded svg image to the folder app/code/root folder/module name/view/adminhtml/web/images/, you should rename the image for more convenience.

Step 3: Create icon.css file in app/code/root folder/module name/view/adminhtml/web/css/ folder with the code:

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

Step 4: Create the default.xml file in the app/code/root folder /module name/view/adminhtml/layout with the code:

<?xml version="1.0" encoding="UTF-8"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="rootfolder_modulename::css/icon.css"/>
    </head>
</page>

Step 5: Run 

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

Loading the page again and see the result.

Hope this guide helps you!

Tags: