How to use Feather Icons in your Angular app ?

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 serve