Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-marketplace-mod

    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,

    • Basically, there have three parts of “_module.less” code,
        • webkulmodulename is the module name.
        • Webkul_ModuleName is module directory.
        • You can modify modify the style of font inside this code.
        • webkulmodulename is the module name.
        • item-menuid :  here menuid is coming from “app/code/Webkul/ModuleName/etc/adminhtml/menu.xml"

    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,

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

     

    . . .

    Comments (2)

    Add Your Comment

  • Santi
    Great tutorial, had found others that didn’t work properly

    Thanks for sharing your knowledge!

  • 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

  • Back to Top
    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

    Table of Content

    Hide Index