Search
×
Log in or create an account
If you have an account with us, please log in.

You have no items in your shopping cart.

Frequently Asked Questions

How can we help you?

banner image

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

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

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

Let’s consider both of them 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,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI2IDBIMTguNzUzNlYxLjQ5MzM5QzE3LjAzNyAwLjU0MTk1NSAxNS4wNjA2IDAgMTIuOTU2NSAwQzYuMzYyMzIgMCAxIDUuMzgxODIgMSAxMkMxIDE4LjYxODIgNi4zNjIzMiAyNCAxMi45NTY1IDI0QzE1LjA1ODcgMjQgMTcuMDM1NyAyMy40NTMxIDE4Ljc1MzYgMjIuNDkzNVYyNEgyNlYwWk03LjM0MDU4IDEyQzcuMzQwNTggMTUuMTI3MyA5Ljg3NjgxIDE3LjYzNjQgMTIuOTU2NSAxNy42MzY0QzE2LjA3MjUgMTcuNjM2NCAxOC41NzI1IDE1LjEyNzMgMTguNTcyNSAxMkMxOC41NzI1IDguODcyNzMgMTYuMDcyNSA2LjM2MzY0IDEyLjk1NjUgNi4zNjM2NEM5Ljg3NjgxIDYuMzYzNjQgNy4zNDA1OCA4Ljg3MjczIDcuMzQwNTggMTJaIiBmaWxsPSIjQUFBNTlGIi8+PHBhdGggZD0iTTcgMTdIMFYyNEg3VjE3WiIgZmlsbD0iIzU3NTc1NyIvPjwvc3ZnPg==) 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,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI2IDBIMTguNzUzNlYxLjQ5MzM5QzE3LjAzNyAwLjU0MTk1NSAxNS4wNjA2IDAgMTIuOTU2NSAwQzYuMzYyMzIgMCAxIDUuMzgxODIgMSAxMkMxIDE4LjYxODIgNi4zNjIzMiAyNCAxMi45NTY1IDI0QzE1LjA1ODcgMjQgMTcuMDM1NyAyMy40NTMxIDE4Ljc1MzYgMjIuNDkzNVYyNEgyNlYwWk03LjM0MDU4IDEyQzcuMzQwNTggMTUuMTI3MyA5Ljg3NjgxIDE3LjYzNjQgMTIuOTU2NSAxNy42MzY0QzE2LjA3MjUgMTcuNjM2NCAxOC41NzI1IDE1LjEyNzMgMTguNTcyNSAxMkMxOC41NzI1IDguODcyNzMgMTYuMDcyNSA2LjM2MzY0IDEyLjk1NjUgNi4zNjM2NEM5Ljg3NjgxIDYuMzYzNjQgNy4zNDA1OCA4Ljg3MjczIDcuMzQwNTggMTJaIiBmaWxsPSIjRkNGQ0ZDIi8+PHBhdGggZD0iTTcgMTdIMFYyNEg3VjE3WiIgZmlsbD0iIzU3NTc1NyIvPjwvc3ZnPg==) 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 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.

Rate the answer?

Total rating: 5.0

If you didn’t find the answer on your question, please, ask here:

Back to top