If you are looking to improve your web app both visually and functionally, icons are a very good place to start. Icons if applied correctly, are easily recognized by users and therefore can substitute long text. This enables developers to utilize the screen real estate wisely especially on small devices.
For instance, if a user sees a hamburger icon, they will recognize it as the menu icon, eliminating the need to also add the word menu next to it. On top of that, they improve the visual appeal of a website and serve as a guide for users when navigating the site. Icons are shipped mainly as Web Fonts and SVG (Scalable Vector Graphics).
This provides an easy to use icons for web developers that can be resized, and effects applied on the fly easily. With Angular Material, you can use different icon packs with Angular Material Icon Component, you can learn more about how to integrate different icon packs here.
Material Icons
This is a set of over 900 Icons which are free to use on your smartphones, desktops and web applications. They are provided as both SVG Icons and Web fonts formats. With the SVG Icons, you can select individually the icons you need from the Material Icons Repository. On top of that, they can be installed using NPM and Bower.
The one downside of this icon pack is lack of social media icons. If you are looking for social icons to fill this gap, there is this GitHub repository which has SVG Icons for all major brands.
You can browse the vast icon library here and learn how to install and use Material Icons here.
Font Awesome
This is one of the most popular and comprehensive icon packs out there. There are available as both web fonts and SVG Icons and unlike Material Icons, they have social icons. While they offer free icons, 1295 icons, they have a pro license offering over 3000 icons. On top of that, a component for Angular is provided together with other popular flameworks.
You can learn more about Font Awesome here. Glyphicons Another web font/SVG icons with over 1000 icons. You can use these icons in your web app, mobile apps and desktop applications. They have a free license for the icons with about 800 icons but if you want the whole set, you will need to shell out either $25 or $59 with future updates included. You can learn more about the licensing options for the icons here.
You can learn more about Glyphicons here.
Clarity Icons
Clarity Design System is a set of UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences. I covered Clarity Design System in a previous post, UI Libraries and Frameworks for Angular 6, here. You can browse the vast icon library here. They cover all major categories imaginable like technology, social, ecommerce etc.
You can learn how to get started with Clarity Icons here.
Fontello
This is more of a tool than an icon pack, but I had to add this to the list. This tool packs vector icons from multiple sources into a single usable web font. This gives you important ability of combining icons from multiple source into one icon pack for your own use.
To quote the authors: “it is like Twitter Bootstrap, but for images and icons.” This gives you the freedom to be picky of icons to include, allowing you to reduce the Web Front footprint and have icons of your choice.
If you are interested, you can visit the official website here or their wiki here.
There are other icons pack that I haven’t worked with before but are worth considering. This include: