As a frontend developer, you are always searching for something new to break conventions or simply bring interest to your work. Maybe you’re simply tired of fontawesome everywhere and you want to try the new and fresh style.
I always liked icons used by Twitter and Simplenote. I love minimalistic line designs that just work without taking too much attention to themselves. Minimalistic or not those icons manage to look beautiful and interesting while their smooth lines feel relaxing.
Feather icons will help you to add this minimalistic, smooth and relaxing feeling into your designs. Feather icons are designed by Cole Bemis. Icon pack includes 280 beautifuly designed icons ranging from app icons to weather icons. All icons are available in SVG format.
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency and usability.
GitHub
You can find extensive documentation on GithHub but unfortunately it doesn’t include Angular. There is already angular-feather package available on NPM by Michael Bazos which will simplify adding Feather icons into your project. But maybe you want to keep your project dependencies minimal and just simply add icons without importing additional modules and components. We all hate import statement hell, and adding one import for every icon can lead to that.
Keep it simple
In your Angular project install feather-icons package from NPM
npm install feather-icons --save
Add one import to your app.component.ts file:
import * as Feather from 'feather-icons';
We need to run replace function after the view has been initalized. We can do this easily in Angular by implementing AfterViewInit hook in our AppComponent. When you add implementation to your AppComponent class it will ask you to implement ngAfterViewInit() function and there we will run Feather.replace() to replace dom elements with icons.
AfterViewInit
Respond after Angular initializes the component’s views and child views / the view that a directive is in.
Angular Documentation – Lifecycle Hooks
import { Component, AfterViewInit } from '@angular/core'; import * as Feather from 'feather-icons'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements AfterViewInit { ngAfterViewInit() { Feather.replace(); } }
Now that all is ready we can add our icons into app.component.html file.
<i data-feather="menu"></i> <i data-feather="plus-circle"></i> <i data-feather="sidebar" color="skyblue" width="50" height="50"></i>
You can run your application and you will see Feather icons in action.
ng serveShare with your friends