Feather icons are beautiful open-source SVG icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability. I discovered these icons few months ago and just fell in love with them. I was eager to use them in my Angular 4 application but, for my disappointment, there was no simple way to do it. Although, I found an Angular package, but it requires to import each icon individually in component (or in shared module) before I can use them in my templates. It was not what I wanted.

Out of frustration, I looked for other options and found a simple hack. I created a custom pipe and used it to render SVG icons in templates. If you don't know what is custom pipe and how it works, please read how to create custom pipes in Angular. Let's start with the actual work.

Installation

First of all, you need to install Feather icons from npm package manager:

$ npm install feather-icons --save

Create a custom pipe

Create a new file called feather-pipe.ts inside your app folder and copy the following code inside it:

import {DomSanitizer} from '@angular/platform-browser';
import {Pipe, PipeTransform} from '@angular/core';

import { icons } from 'feather-icons'; // v4+

@Pipe({ name: 'feather' })
export class FeatherIconsPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(icon: string, size: number = 24, color: string = 'inherit') {
    return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
      width: size,
      height: size,
      color: color
    }));
  }
}

Note that I used DomSanitizer to bypass Angular built-in protections against common web-application vulnerabilities and attacks. Otherwise, Angular will sanitize SVG contents and icons will not render.

Going forward, you need to include this custom pipe in declaration array of app.module.ts (or in shared module) so that it is available in templates:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { FeatherIconsPipe } from './feather.pipe.ts';

@NgModule({
  declarations: [
    AppComponent,
    FeatherIconsPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How to use it

Now you can use Feather icons in your templates as following:

<span  [innerHTML]="'arrow-right' | feather"></span>

In above code snippet, arrow-right is the name of the Feather icon. It will produce following HTML:

<span>
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
      <line x1="4" y1="12" x2="20" y2="12"></line>
      <polyline points="14 6 20 12 14 18"></polyline>
   </svg>
</span>

The default SVG icon size is 24x24. However, you can easily control the size and fill color of the icons with custom pipe optional parameters:

<span  [innerHTML]="'arrow-right' | feather:32:'#007FFF'"></span> <!-- will render 32x32 icon filled with #007FFF color -->

Conclusion

This is the end of our tutorial how to use Feather icons in Angular application. I'm not saying it is the best solution but is a good hack. I'll think to publish it at npm package manager so that is available to everyone. I'd rather love if someone else does it.

Don't forget to subscribe to our Weekly Design newsletter to get weekly recap of best design articles, resources and jobs every Monday 10am. Find this article useful? Share it with your friends and followers below.