How to change default icon for top level menu backend in Magento 2

The Most Popular Extension Builder for Magento 2

With a big catalog of 224+ extensions for your online store

Have you ever wondered about how to customize the icon in the top level menu in backend? Actually, you can change the default icon when adding your custom menu. Some companies and developers will also like to adapt their own icons and menu for all of their extensions to make the interface unique with eye-catching visibility. However, this work may need some help with PHP files and non-savvy CMS users may face problems with the customization.

Table Content

Step 1: Create the folder file
Step 2: Insert the script

Therefore, to help all store owners with the job of changing default icon for top level menu backend in Magento 2, following steps:

Step 1: Create the icon folder file

Go to lib/web/fonts
Create your module folder
Injected it inside Magento 2 without touching the core files
Go to app/design/adminhtml/Magento/backend
Create folder dubbed Package_Modulename/web/css/source/
Create _module.less file in a source folder.

Step 2: Insert the script

Add the following lines inside file _module.less:

@modulename-icons-admin__font-name-path: '@{baseDir}fonts/modulename/icomoon';
@modulename-icons-admin__font-name : 'modulename';
.font-face(
@family-name:@modulename-icons-admin__font-name,
@font-path: @modulename-icons-admin__font-name-path,
@font-weight: normal,
@font-style: normal
);
.admin__menu .item-modulename.parent.level-0 > a:before {
  font-family: @modulename-icons-admin__font-name;
  content: "\e800";
}