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
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:cleanLoading the page again and see the result.
Hope this guide helps you!