Add IcoMoon to Angular Project

Melissa De Alba — Mon, 07 Jun 2021 22:13:49 +0000

Follow https://icomoon.io/ and click on IcoMoon App.

This will take you to a new page probably with a default set. You can remove this if need by clicking in the menu an selecting the option Remove set.

Now we are ready to create a new library on IcoMoon. Click on Import Icons button.

Import the set of icon you want.

If the Library name is not set you can do it by clicking on the menu, and select the option Properties.

Modal will be display showing the properties of the set, click on Edit Metadata. After a form will appear, here set the name as you wish and close the form to save it

All icons will be display on IcoMoon page now select all to add them to the library by clicking on them. On the bottom of the page we will see the number of icons selected, then we click on Generate Font.

Update the names if need, for example for filled icons I'll add the suffix -fill. Ex bell-fill

Now we make sure the set the font name by clicking on Preferences.

A modal will appear, we set the font name and we can also change the class prefix.

Now we continue by clicking Download, .zip file will be download

Extract the files into your PC.
This folder must contain :
• Demo file -> demo.html
• Styles file -> styles.css
• Fonts folder -> fonts to display the icons

At this point we finish with the part of IcoMoon page, now we continue to update in the project. For this case we will take an Angular project as a reference. The process should be similar in any other project.

Inside the project search for the assets folder and add (copy) the Fonts folder.

The fonts with the icons are ready to use, in this project I have a separate file for the icons but we can add the styles.css in the styles file of the project.

Now we can use the icons inside the html by adding the class of the icon we need. Ex:

DEV Community: Melissa De Alba

Add IcoMoon to Angular Project