Request Quote

Magento 2 : Change default icon in menu for custom module.

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,
  • icon.eot
  • icon.svg
  • icon.ttf
  • icon.woff

glyphter.com generated these files.

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 !!

 

. . .

Comment (1)

Add Your Comment

  • use this link
    Hello There. I found your blog using msn. This is a really well written article. I will make sure to bookmark it and come back to read more of your useful information. Thanks for the post. I’ll certainly return.

    https://www.play.fm/drjanetjdavis

  • css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Index