Is there a standard, framework supported way to add a new Icon to a Magento 2 top level Menu item?
When you add a new top level Menu Item to Magento 2's backend, you end up with a generic hexagon as the icon.
Is there an officially supported way to add a custom icon here? The <li/>
tag has an id
element, so I can think of an infinite number of ways to jam an icon in there via CSS. What I'm interested in here is how core Magento modules do it — i.e., what's The Right and True Way™ to add an icon.
Update: Re: Duplicates — I'm trying to avoid a solution like the one outlined here. i.e. all that does is jam some additional, unstructured CSS rules into a module in order to add an image. At minimum, Magento's own rules (seem to?) use a structured _menu.css
file to style those icons. I'm operating from the point of view that there's a structured way to do this, and what I'm looking for is that structure, not another "this happens to work now but might break in the future because it doesn't follow the implicit design of the core system".
Best Answer
As of Magento 2.0.5, I don't think there is a structured way to do this.
Core Magento modules do it like this:
menu.xml
filesthe CSS class is generated via the following code where
$menuId
is theid
attribute of the menu item:this CSS class is then being used in the
app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_menu.less
. For instance:The icon itself it set via the
content
attribute that uses a less variable. In the example above, the less variable is@icon-promotions_content
and is declared underapp/design/adminhtml/Magento/backend/web/css/source/variables/_icons.less
:The
\e609
is an unicode entry then used in theapp/design/adminhtml/Magento/backend/web/fonts/admin-icons/admin-icons.svg
file (generated by IcoMoon btw) to generate the corresponding glyph:I reckon the main problem is that the
menu.xml
does not handle such thing as an icon attribute, you can see it by looking at theapp/code/Magento/Backend/etc/menu.xsd
: