Magento 2 – How Does Magento Include the Admin Icons SVG File

adminhtmlfontsmagento-2.0magento2

In Magento 2, the icons for the backend Menu are Unicode code points that are part of the Private User Area code point range, and appear to be defined via the file

vendor/magento//theme-adminhtml-backend/web/fonts/admin-icons/admin-icons.svg

How does admin-icons.svg get included into a Magento Admin Page's "font space" (for lack of a better word).

Best Answer

So if I got it right:

The path of this file is defined in a less variable in app/design/adminhtml/Magento/backend/web/css/source/variables/_icons.less:
```
@icons-admin__font-name-path: '@{baseDir}fonts/@{icons-admin__file-name}/@{icons-admin__file-name}';
```
This variable is then used in app/design/adminhtml/Magento/backend/web/css/source/_icons.less (see the difference with the first file I mentionned ? it's one folder above) to be declared as a path to a custom font :
```
.lib-font-face(
    @family-name: @icons-admin__font-name,
    @font-path: @icons-admin__font-name-path,
    @font-weight: normal,
    @font-style: normal
);
```

Even though the final rendered CSS looks like this:

src: url('../fonts/admin-icons/admin-icons.eot');

I don't think Magento converts the SVG file to an EOT file.

To me, Magento is shipped with 5 different versions of the same file:

admin-icons.eot
admin-icons.svg
admin-icons.ttf
admin-icons.woff
admin-icons.woff2

All those 5 files are then referenced in the lib/web/css/source/lib/_typography.less file:

.lib-font-face(
    @family-name,
    @font-path,
    @font-weight: normal,
    @font-style: normal
) {
    @font-face {
        font-family: @family-name;
        src: url('@{font-path}.eot');
        src: url('@{font-path}.eot?#iefix') format('embedded-opentype'),
        url('@{font-path}.woff2') format('woff2'),
        url('@{font-path}.woff') format('woff'),
        url('@{font-path}.ttf') format('truetype'),
        url('@{font-path}.svg#@{family-name}') format('svg');
        font-weight: @font-weight;
        font-style: @font-style;
    }
}

I reckon it has to do with browser compatibilities. Again I may be wrong here.

Related Solutions

Magento – How to update admin routers of custom module for patch SUPEE-6788

I managed to change my custom module to use the Magento new way as recommended with the patch 6788. So I give here as a reference for other, also answer the question in this thread.

Change to router in the config.xml file:

Before:

<admin>
    <routers>
        <adminhello>
            <use>admin</use>
            <args>
                <module>Pulsestorm_Adminhello</module>
                <frontName>admin_adminhello</frontName>
            </args>
        </adminhello>
    </routers>
</admin>

After

<admin>
    <routers>
        <adminhtml>
            <args>
                <modules>
                    <adminhello before="Mage_Adminhtml">Pulsestorm_Adminhello_Adminhtml</adminhello>
                </modules>
            </args>
        </adminhtml>
    </routers>
</admin>

Change to the Controller

2.1.

Before Path

/app/code/local/Pulsestorm/Adminhello/controllers/Adminhtml/AdminhellobackendController.php

After path

/app/code/local/Pulsestorm/Adminhello/controllers/Adminhtml/Adminhello/AdminhellobackendController.php

2.2

Before class

class Pulsestorm_Adminhello_Adminhtml_AdminhellobackendController extends Mage_Adminhtml_Controller_Action 
{
..
}

After class

class Pulsestorm_Adminhello_Adminhtml_Adminhello_AdminhellobackendController extends Mage_Adminhtml_Controller_Action
{
...
}

If you have an adminhtml.xml file (just give as an example as below)

Before

<config>
    <menu>
        <adminhello_config translate="title" module="adminhello">
            <title>Adminhello Settings</title>
            <sort_order>100</sort_order>
            <children>
                <list_action translate="title" module="adminhello">
                    <title>Manage Hellos</title>
                    <sort_order>4</sort_order>
                <action>adminhello/adminhtml_adminhellobackend</action>
                </list_action>
...
            </children>
        </adminhello_config>
    </menu>
</config>

After

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <menu>
        <adminhello_config translate="title" module="adminhello">
            <title>Adminhello Settings</title>
            <sort_order>100</sort_order>
            <children>
                <list_action translate="title" module="adminhello">
                    <title>Manage Hellos</title>
                    <sort_order>4</sort_order>
                <action>adminhtml/adminhello_adminhellobackend</action>
                </list_action>
...
            </children>
        </adminhello_config>
    </menu>
</config>

Change in your codes

Before: getting URLs

Mage::getUrl('adminhello/adminhtml_adminhellobackend/doSomething')

After: getting URLs

Mage::getUrl('adminhtml/adminhello_adminhellobackend/doSomething')

Change in layout files (if you have layout files, for example as below)

Before layout

<adminhello_adminhtml_adminhellobackend_index>
...
</adminhello_adminhtml_adminhellobackend_index>

After layout

<adminhtml_adminhello_adminhellobackend_index>
...
</adminhtml_adminhello_adminhellobackend_index>

Magento 2 Backend – How Admin Icons Font Files are Generated

As I assumed and as Vitalii confirmed in the comments, the IcoMoon App is used internally by Magento frontend developers to generate the custom fonts file.

The app lets you generate every possible format:

WOFF
TTF
EOT
SVG

Best Answer

Related Solutions

Magento – How to update admin routers of custom module for patch SUPEE-6788

Magento 2 Backend – How Admin Icons Font Files are Generated

Related Topic