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 as hovering over it or clicking it.

We can achieve the desired results by using the SVG of the icon and manipulating the fillproperty of the SVG image. 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 factor 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 as fonts will help you improve user experience. It is also easy for developers to work with icons/images as fonts in comparison with different images of different formats.

Once you have icons as fonts, you treat them as one. You are now equipped with all CSS properties of fonts and can now apply to 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: Scalable Angular Folder Structure for demo. Clone it and follow along.

I’ll be adding icons from one of the most famous sources — Flaticon as fonts in the angular app.

Step 1: Download the icons

Download the desired icons from Flaticon. I’ll be downloading social media icons in .svg format.

• Facebook
• Instagram
• LinkedIn
• Twitter
• YouTube

Step 2: Converting icons to fonts

For this, we’ll be using the services of Icomoon. This tool helps to not only convert the icons (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 by visiting the Icomoon app.

ImImport 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.

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.

Step 3: Importing generated fonts in your app

After downloading the fonts, you’ll have a zipped file. Extract it and you’ll see a bunch of files and folders like below:

Moving to our 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 Icomoon generated style.css and paste it in the _icon.scss file.

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

– Aditya Tyagi

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 _icons.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 and modified some CSS properties like 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.

Code for Landing Page – HTML

Code for Landing Page – SCSS

Step 5: Enjoy!

Thank you for your time. I hope I could bring value.

I’m reachable on some social media channels, so consider checking me on:

• Twitter especially if you’re into programming and software development.
• LinkedIn if you want to get in touch for some collaboration opportunity.