How To In Magento 2 – How To Add Custom Icons?

2 June 2016

Contents

JOIN THE GROUP ON FACEBOOK!
PIN ME!
More In This Series

wp-content/uploads/2018/06/How-To-In-Magento-2.jpg

Today we will talk about icons and one of the possibility of adding them. I have noticed it is one of the most popular topic lately. Let me just show you how to add your own custom icons in easy and fast way. First of all check out this Magento documentation about fonts.

In order to add icons I would recommend to use IcoMoon. Add icons as font rather than images. In order to generate font, you will need to have icons in svg fill format. Please, see the documentation how to convert strokes to fill. The next step is to upload and select icons, generate font and add to the project app/design/frontend/<Vendor>/<theme>/web/fonts/

Notice, that you will need to generate woff2 version as it is not included in IcoMoon zip, use some online convertors.

The next step is to create _typography_extend.less file with following content:

body { 
  .lib-font-face( 
    @family-name:'Icomoon', 
    @font-path: '@{baseDir}fonts/icomoon/icomoon', 
    @font-weight: @font-weight__light, 
    @font-style: normal 
  ) 
}

Remember to add_typography_extend.less to _extend.less file. See my last post How In Magento2 – How To Start?

Notice, that @font-weight__light is already defined. fonts/icomoon is directory where you can find font files named icomoon.xxx in different formats. All font files should have the same name.

As Magento2 has already icons as font, you will need to overwrite current icon font in _theme.less by adding following lines:

//
//  Icons
//  ---------------------------------------------

@icons__font-path: "@{baseDir}fonts/icomoon/icomoon";
@icons__font-name: 'icomoon';
@icon-font__size: 2.2rem;

Notice that all new icons variables should be defined in _variables.less file. For example:

//
//  Icons
//  ---------------------------------------------

@icon-fb: '\e900';
@icon-twitter: '\e904';
@icon-yt: '\e905';
@icon-pinterest: '\e902';

JOIN THE GROUP ON FACEBOOK!

PIN ME!

I hope it can help with your journey with M2! Also feel free to give your feedback and advices. Did you find this post useful? I would be more than happy if you share it with your friends, maybe someone else will find it useful as well. Good luck!