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

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
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";
}
- Save it and you have finished managing the top level menu Backend in Magento 2
Related Post
Abandoned cart email.

Recent Tutorials

Magento 2 Admin Panel
6 Steps to Creating an Extension Package File in Magento
How to build landing pages in Magento store?
Comments for How to change default icon for top level menu backend
Explore Our Products:
People also searched for
- magento 2 admin menu icon
- magento 2 change cart icon
- magento 2 admin icons
- how to install fonts in magento 2
- magento icon
- magento 2 icons
- magento 2 change font
- magento 2 icon
- magento2 icons
- how to change default icon for top level menu backend in magento 2
- default icon
- magento2 icon
- backend icon
- icon magento
- magento font
- magento icons
- change default icon
- magento 2 icons list
- 2.2.x, 2.3.x, 2.4.x
Stay in the know
Get special offers on the latest news from Mageplaza.
Earn $10 in reward now!