Extending Magento 2’s Icon Font

While there is a lot of debate over the PROs and CONs of Magento2’s frontend system one feature I like is the ability to easily extend it’s icon font system. It has the advantage of allowing you to easily set custom font icons without the need to overriding template files. In this post I will explain the process of adding your own custom icon-font to your Magento2 store front.

First, let’s have a look at how Magento2 uses font-icons in it’s store front. Looking on the front end of a fresh Magento2 installation you can see that the cart icon is added with a glyph code, \e611, on a pseudo :before element with a font family of luma-icons, i.e. from the default Magento Luma theme.

Magento2 Cart Icon CSS

The glyph code is set in lib/web/css/source/lib/variables/_icons.less with @icon-cart: '\e611'.

The luma-icons font-family is set in app/design/frontend/Magento/luma/web/css/source/_theme.less with

@icons__font-path: "@{baseDir}fonts/Luma-Icons";
@icons__font-name: "luma-icons";

For the blank theme it is set in lib/web/css/source/lib/variables/_typography.less with:

@font-path: "../../fonts/";
@icons__font-path: "@{baseDir}fonts/Blank-Theme-Icons/Blank-Theme-Icons";

SOLUTION

So to extend the icon-fonts you can overwrite the Magento LESS rules above in your own theme within your \app/design/frontend/[vendor name dir]/[them name dir]/web/css/source/_extend.less_.
But first you’ll need to create your own Magento theme and icon-font with the font-icons you wish to use.

If you’re un-familiar with how to create your own theme in Magento2 you should review the documentation, with particular attention to this section.

Putting Your Custom Font Together

There are plenty of ways and tools available online to create your own icon-font, I use icomoon. There may be better ones out there but it was the first I tried and does everything I need. It has a large library of icons you can use for free or purchase, additionally you can import your own icons, so you can add your own custom icons. They need to be in SVG format.

When I’m creating my custom icon font for my Magento2 theme I start by importing all of Magento’s icons, this way I’ll keep Magento’s icons for the ones I do not have a replacement icon for.   You can find the font to import at luma/web/fonts/Luma-Icons.svg.
Remember to click Yes when asked Use this font’s metrics and metadata when exporting fonts? after you’ve selected to import the font.  
Next you can upload any of your custom icons to icomoon that you wish to use, you could also add icons you download from another library like fontawesome.
It’s good idea to set the grid size on the font icons, click on an icon to edit it (remember to select the edit option in the toolbar of the icomoon app).
I set the grid size to 26px as this is what Magento2’s icon-font’s use, you can see it’s set in  lib/web/css/source/lib/variables/\icons.less_ with @icon-sprite__grid: 26px.

To generate your icon-font, select the icons you wish to use and click Generate Font.
Here you have the options to edit the glyph code, i.e. e611, on your custom icons which you’ll be using to update Magento2’s LESS rules.
Also you’ll notice that all of the Magento glyphs you imported kept their own glyph codes.

When you’re ready click Download and place your new fonts in your theme’s font directory, app/design/frontend/[vendor name dir]/[them name dir]/web/fonts/.

You may notice that you’re missing the .woff2? This is only available from icomoon on one of their paid plans, but most browsers don’t require it.

Adding your Icons to Magento

Now that you’ve got your icon-font in place it’s time to add the LESS rules to your theme to put them on the frontend of your Magento2 storefront. For this I use three files within my theme…

app/design/frontend/[vendor name dir]/[them name dir]/web/css/source/\extend.less_

@import "variables/_typography_extend";
@import "variables/_icons_extend";

app/design/frontend/[vendor name dir]/[them name dir]/web/css/source/variables/\typographyextend.less

// see lib/web/css/source/lib/variables/_typography.less
@icons__font-path: "@{baseDir}fonts/Myfontname-Icons";
@icons__font-name: "myfontname-icons";

app/design/frontend/[vendor name dir]/[them name dir]/web/css/source/variables/\iconsextend.less

// See lib/web/css/source/lib/variables/_icons.less
@icon-cart: "\e901";
@icon-menu: "\e902";

As you can see in the example above I put a glyph code for @icon-cart which overwrites the value set in Magento’s theme with the one for my custom icon-font.

Conclusion

Icon Fonts vs Inline SVGs vs Image Sprites in the Context of Magento 2

There are lots of debates on which is the best method to add icons to your website and Magento 2 comes with icon fonts baked into is’s system.

While it may not be your preference, it’s easy to extend without the need to overwrite template files. You only need to extend a few LESS files, so this is a lean solution for Magento2.
Also font-icons have their advantages too, other CSS rules such as transitions apply to them nicely.

Perhaps inline SVGs would give you more flexibility with one less HTTP requests and greater control over CSS positioning and sizing, but it’s a small sacrifice as you would rarely need this level of control. You can still add inline SVGs if required. The icon-font itself is just one small HTTP request so small on the scale of things.

Compared to a image sprite, icon fonts are much better as you can easily apply more than one CSS rule to them.