How to Configure a Custom Icon in the Magento 2 Backend Programmatically?

There are 2 options for how you can change the default luma icons in the Magento 2 admin panel:

• By using the background;
• By using the icon font.

Let’s consider how to do the Magento 2 change of favicon closely.

Changing icons using the background

This way is more flexible because you can use any picture that your designer has made. So you don’t need to create, upload, and add icon fonts.

To use this method, you will need 2 images: for the icon and the icon hover. You need to convert the png icon for Magento 2 to the base64 format via an online converter, for example, base64-image.de.

Next, you need to enter this style in LESS or CSS file:

#menu-menuamasty-base-menu > a:before {

 content: '';
 background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA
yNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1b
GU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iT
TI2IDBIMTguNzUzNlYxLjQ5MzM5QzE3LjAzNyAwLjU0MTk1NSAxNS4wNjA2IDAgMTIuOTU2NSAwQzYuMzYyMzI
gMCAxIDUuMzgxODIgMSAxMkMxIDE4LjYxODIgNi4zNjIzMiAyNCAxMi45NTY1IDI0QzE1LjA1ODcgMjQgMTcuMD
M1NyAyMy40NTMxIDE4Ljc1MzYgMjIuNDkzNVYyNEgyNlYwW
k03LjM0MDU4IDEyQzcuMzQwNTggMTUuMTI3MyA5Ljg3NjgxIDE3LjYzNjQgMTIuOTU2NSAxNy42MzY0QzE2LjA
3MjUgMTcuNjM2NCAxOC41NzI1IDE1LjEyNzMgMTguNTcyNSAxMkMxOC41NzI1IDguODcyNzMgMTYuMDcyNSA
2LjM2MzY0IDEyLjk1NjUgNi4zNjM2NEM5Ljg3NjgxIDYuMzYzNj
QgNy4zNDA1OCA4Ljg3MjczIDcuMzQwNTggMTJaIiBmaWxsPSIjQUFBNTlGIi8+PHBhdGggZD0iTTcgMTdIMFYyN
Eg3VjE3WiIgZmlsbD0iIzU3NTc1NyIvPjwvc3ZnPg==) no-repeat center;
 background-size: contain;
}

#menu-menuamasty-base-menu > a:hover:before,
#menu-menuamasty-base-menu._show > a:before {
 background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAg
MCAyNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBma
WxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZC
IgZD0iTTI2IDBIMTguNzUzNlYxLjQ5MzM5QzE3LjAzNyAwLjU0MTk1NSAxNS4wNjA2IDAgMTIuOTU2NSAwQz
YuMzYyMzIgMCAxIDUuMzgxODIgMSAxMkMxIDE4LjYxODIgNi4zNjIzMiAyNCAxMi45NTY1IDI0QzE1LjA1ODc
gMjQgMTcuMDM1NyAyMy40NTMxIDE4Ljc1MzYgMjIuNDkzNVY
yNEgyNlYwWk03LjM0MDU4IDEyQzcuMzQwNTggMTUuMTI3MyA5Ljg3NjgxIDE3LjYzNjQgMTIuOTU2NSAxNy
42MzY0QzE2LjA3MjUgMTcuNjM2NCAxOC41NzI1IDE1LjEyNzMgMTguNTcyNSAxMkMxOC41NzI1IDguODcyN
zMgMTYuMDcyNSA2LjM2MzY0IDEyLjk1NjUgNi4zNjM2NEM5L
jg3NjgxIDYuMzYzNjQgNy4zNDA1OCA4Ljg3MjczIDcuMzQwNTggMTJaIiBmaWxsPSIjRkNGQ0ZDIi8+PHBhdG
ggZD0iTTcgMTdIMFYyNEg3VjE3WiIgZmlsbD0iIzU3NTc1NyIvPjwvc3ZnPg==) no-repeat center;
 background-size: contain;
}

Changing icons using the fonts in Magento 2

The 2nd way you can change icons is by creating an magento 2 icon font. This option is less convenient, and we don’t recommend using it because you will need to generate fonts on a third-party website and enable a new font. But if you are still sure you need to use the custom icon font, you will find a step-by-step guide on how to do it below.

Step 1. First of all, you need to generate the font icon. For this, you can use an online app like icomoon.io.

Step 2. When you have created a new font, extract the files, and put them into the Amasty/Icon/view/adminhtml/web/fonts folder.

Step 3. Go to app/code/Amasty/Icon/view/adminhtml/web/css/source/ and create LESS files. Copy the code form the style.css file in the font folder and enter it in the _module.less file.

Style.css

@font-face {
 font-family: 'icomoon';
 src: url('fonts/icomoon.eot?ly34e0');
 src: url('fonts/icomoon.eot?ly34e0#iefix') format('embedded-opentype'),
 url('fonts/icomoon.ttf?ly34e0') format('truetype'),
 url('fonts/icomoon.woff?ly34e0') format('woff'),
 url('fonts/icomoon.svg?ly34e0#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
 font-display: block;
}

_module.less

@font-face {

 font-family: 'amasty-icon';
 src: url('../../fonts/icomoon.eot?ly34e0');
 src: url('../../fonts/icomoon.eot?ly34e0#iefix') format('embedded-opentype'),
 url('../../fonts/icomoon.ttf?ly34e0') format('truetype'),
 url('../../fonts/icomoon.woff?ly34e0') format('woff'),
 url('../../fonts/icomoon.svg?ly34e0#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
 font-display: block;
}

.admin__menu .item-amastyicon.level-0 > a:before {
 font-family: 'amasty-icon';
 content: '\e900';
}

Don’t forget to change all the font and content URLs. They should have the right path.

item-amastyicon is coming from the app/code/Amasty/Icon/etc/adminhtml/menu.xml file:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
 <menu>
 <add id="Amasty_Icon::amastyicon"
 title="Amasty"
 module="Amasty_Icon"
 sortOrder="20"
 resource="Amasty_Icon::amastyicon"
 />
 </menu>
</config>

To get the code of the element that you want to change, open the ChromeDevTools and find the needed selector: ‘.admin__menu .item-amastyicon.level-0 > a:before’.

Step 4. Run the following commands to change the icon:

rm -rf var/view_preprocessed/* pub/static/*

php bin/magento setup:static-content:deploy

Step 5. Log in to your admin panel and check the result.

By using these 2 ways, you can change any icons in Magento 2 backend. And to speed up your admins’ workflow, check out our Extended Product Grid with Editor and Extended Order Grid extensions. Both of them allow you to add custom columns and remove the unnecessary, change their order with the drag-and-drop, save a custom view of the grid for quick access and limit the access rights for separate admin users.