By default, Magento 2 adds custom icon(“hexagonal icon“) when you add a custom menu to a custom module.
But to make more visibility and attractive everyone wants to add module icon along with custom menu like all the core Magento 2 menus. Then one question arises,
“How to change default icon in the main menu of the module ?”
So this article will demonstrate how to change default icon in the main menu.
Hence these steps will help you to change icon,
Step 1:
First of all create font icon of your .svg icon with help of glyphter.com,
Step 2:
Paste all font files(obtained by glyphter.com) inside below path,
“Webkul/ModuleName/view/adminhtml/web/fonts“
Step 3:
First of all create less file inside below path,
“app/code/Webkul/ModuleName/view/adminhtml/web/css/source/_module.less“
Step 4:
Now place below code inside “_module.less” file,
@webkulmodulename-icons-admin__font-name-path: '@{baseDir}Webkul_ModuleName/fonts/modulename';
@webkulmodulename-icons-admin__font-name : 'ModuleName';
.lib-font-face(
@family-name:@webkulmodulename-icons-admin__font-name,
@font-path: @webkulmodulename-icons-admin__font-name-path,
@font-weight: normal,
@font-style: normal
);
.admin__menu .item-menuid.parent.level-0 > a:before {
font-family: @webkulmodulename-icons-admin__font-name;
content: "\0041";
}
Basically, there have three parts of “_module.less” code,
@webkulmodulename-icons-admin__font-name-path: '@{baseDir}Webkul_ModuleName/fonts/modulename'; @webkulmodulename-icons-admin__font-name : 'ModuleName';
- webkulmodulename is the module name.
- Webkul_ModuleName is module directory.
.lib-font-face( @family-name:@webkulmodulename-icons-admin__font-name, @font-path: @webkulmodulename-icons-admin__font-name-path, @font-weight: normal, @font-style: normal );
- You can modify modify the style of font inside this code.
- webkulmodulename is the module name.
.admin__menu .item-menuid.parent.level-0 > a:before { font-family: @webkulmodulename-icons-admin__font-name; content: "\0041"; }
- item-menuid : here menuid is coming from “app/code/Webkul/ModuleName/etc/adminhtml/menu.xml
<menu> <add id="Webkul_ModuleName::menuid" title="Custom Module" module="Webkul_ModuleName" sortOrder="10" resource="Webkul_ModuleName::moduleid"/> <add id="Webkul_ModuleName::childmenuid" title="Menu" module="Webkul_ModuleName" sortOrder="1" parent="Webkul_ModuleName::moduleid" resource="Webkul_ModuleName::menuid"/> </menu>
Step 5:
Now next question is which directories need to clear?
As per Magento 2 guidelines,
http://devdocs.magento.com/guides/v2.0/howdoi/php/php_clear-dirs.html
If there have new/any changes inside less/template files hence we need to clear “var/view_preprocessed“. All prepossessed files are listed here.
We also need to clear all backend public files.
So it takes following commands to deploy these changes,
rm -rf var/view_preprocessed/* rm -rf pub/static/adminhtml/* php bin/magento setup:static-content:deploy
So run these commands on your Magento server (make sure you run these commands from the user who have ownership of magento directory)
Once you have successfully run these commands then as a result changes will be reflected at Magento.
Now last but not the least, Refresh the page admin, Finally you can see the default icon is successfully changed.
Even more you can also check less file of your custom module inside magento publish directory.
We would love the hear your thoughts, suggestions, and questions in the comments below !!
Thanks for sharing your knowledge!