Using icons as fonts in Angular, React or Vue

There are a lot of use cases wherein we need to control the styling of icons and images based on user behavior. These use-cases come into picture when the user interacts with the icons/images in the form of hovering over it or clicking it.

We can achieve the desired results by using the SVG of the icon and manipulating the fill property of the SVG image. But to be honest, that is too much work. It also reduces the readability of the code.

What can we achieve with it?

Impeccable user experience is one of the most important and deciding factors for user retention. A product’s success is not only gauged from the number of new users/visitors but also from repeated/recurring users.

Therefore, practicing this method of importing icons or images as fonts will help you improve user experience. It is also easy for developers to work with icons/images as fonts rather with different images of different formats.

Once you have icons/images as fonts, you start treating them as one. You are now equipped with all the CSS properties of fonts and apply them. Some of them are:

  1. Changing font-size (alters the size of the icon/image)
  2. Changing color
  3. Changing background-color

How?

I’ll be using the following repo: https://github.com/adityatyagi/scalable-angular-folder-structure for the demo. Clone it and follow along.

I’ll be adding icons from one of the most famous sources – https://www.flaticon.com/ as fonts in the angular app.

Step 1 – Download the icons

Download the desired icons from https://www.flaticon.com/. I’ll be downloading social media icons in .svg format.

  • Facebook
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
Social media icons
Social media icons in SVG format

Step 2 – Converting images to fonts

For this, we’ll be using the services of https://icomoon.io/. This tool helps to not only convert the images (svg) to fonts but also helps to keep related icons in a group (or set as they call it). That is a pretty neat feature. We can also create an account and manage all our icons project-wise. To be honest, all this and that too in a free tool – IMPRESSIVE!

Start with visiting the Icomoon app.

Icomoon
Start with the icomoon app

Import the SVG icons using the Import Icons button and it will create a list of all your icons in an Untitled Set.

Then, select all the icons by clicking on them.

Select icons
Selected icons will have a yellow border

Click on the Generate Font button in the bottom-right corner. This will generate fonts for your SVG icons and will give an option to download the fonts. The download option will come in the bottom-right corner.

Generate font and download

Step 3 – Importing generated fonts in your angular app

After downloading the font, you’ll have a zipped file. Extract it and you’ll be with a bunch of files and folders:

Icomoon fonts files

Moving to our angular application, in the assets folder, create an icon folder. Put all the files from the fonts folder which you get from the icomoon.

Next, we create a folder scss, again inside the assets folder. We’ll add another nested folder inside scss folder – modules. There we’ll make a file _icon.scss.

Next, copy all the contents from style.css file from the icomoon generated file and paste it in the _icon.scss file.

Note: Make sure you have the correct path while importing the fonts. I have also added a comment in the _icon.scss file so that you do not miss it.

Now, you have all the icons as classes now.

  • Facebook – icon-facebook-logo
  • Instagram – icon-instagram-logo
  • LinkedIn – icon-linkedin-logo
  • Twitter – icon-twitter
  • YouTube – icon-youtube

Next, we import the _icon.scss file in our main stylesheet – style.scss

Step 4 – Fire up the engine!

I have tried to use the fonts on the landing page. Have played around with color, font-size, and backgrounds of the icons. I have also added styling to the facebook icon when you hover over it. Check it out here: https://adityatyagi.github.io/scalable-angular-folder-structure/

Icons as fonts

Code for Landing Page – HTML

Code for Landing Page – SCSS

Step 5: Enjoy!

Okay, bye!

Questions, suggestions, advice, or have some frontend development work to be done? Hit me up in the comments section or contact here!

2 comments / Add your comment below

  1. hey, nice article, I didn’t know about iconmoon or svg to font thing. What I use to do is mask the svg image using background color but yes it has some compatibility issue but if our target audience is safari and chrome then it is quite handy.

Leave a Reply to Abhishek Maurya Cancel reply

Your email address will not be published. Required fields are marked *