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. Often, we use icons delivered by a component library, such as Material, or we take icons from a dedicated icon library like font-awesome. In some cases, however, the icons need to match our brand. Therefore, we need to provide a custom icon library.

If you create an icon library, performance is something to consider. You don’t want to deliver a set of 300 icons to the user if they only are going to display two icons. Right?

Previously, I wrote an article about how to create an icon library in Angular. I recommend you check out this article because it explains a lot of concepts and best practices when it comes to creating an Icon library. It will also help you better understand the things explained in this article.

Too lazy to read the article? Here’s a quick summary:

We should prefer SVG icons over fonts because they offer more features.

icons over fonts because they offer more features. Since SVG icons are just code, they are bundled into our JavaScript files.

icons are just code, they are bundled into our JavaScript files. An icon registry is a clean way to make icons tree shakable.

svg-to-ts is a nice helper tool to transform SVG icons into code.

Why another article❓

Recently I had the chance to build an icon library for a big client. During the process, I gained some new valuable insights which are worthy to share.

Let’s start by having a look at what can be improved in the current approach?

Throughout this blog post, we are going to use those awesome Icons made by Freepik from www.flaticon.com

Different levels of tree shaking 🌲

My previous article describes how to develop a tree shakeable icon library, however, they are not fully tree shakable. Fully tree shakable? 🤔

Never heard of “fully tree shakable”? Well, that’s not surprising, it’s a term I invented here (it’s not an official term 😉). What do I mean by that?

Treeshakable icons so far