How to create an icon library in Angular

The ultimate guide to create your own flexible and tree-shakable SVG icon library

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

Nearly every SPA uses icons. Usually, we use icons delivered by our UI framework, such as Material, or we take icons from a dedicated icon library like font-awesome.

But, in some cases, the icons need to match our brand. Therefore, the day may come where a designer or a product owner asks you to provide a custom icon library.

SVG 🆚 IconFont

The first task is to find the correct format for your icons; SVG or IconFont? Which one to use?

Well, it depends on your needs, but nowadays, most people prefer SVG over IconFonts. Here’s why:

• SVG icons can have multiple colors, IconFont on the other side can’t.
• Even though both formats are vector-based, browsers interpret fonts as text. Therefore, SVG usually, look sharper.
• SVG can be positioned by setting the size. Icon fonts on the other side are inserted via pseudo-element, which makes positioning trickier.