Using Feather with Angular

feather-pipe.ts

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
    }));
  }
}

Line 4

BEFORE:
import * as feather from 'feather-icons/dist/feather';

AFTER:
import { icons } from 'feather-icons';

Since we only need the icons object, we can import just icons from the feather-icons package.

Line 11

BEFORE:
transform(..., fill: string = 'none') { ... }

AFTER:
transform(..., color: string = 'inherit') { ... }

I prefer to use color to set the color of the icons. This works because the stroke of all the SVGs are set to currentColor. This approach is a little more flexible than setting the fill because we can set the color of elements with both stroke and fill with one property.

Line 12

BEFORE:
feather.toSvg(icon, { ... });

AFTER:
icons[icon].toSvg({ ... });

I recently released Feather v4 which came with some breaking API changes. This is the new way to use the toSvg() function.

v4.0.0 Release Notes

Thank you for the update @colebemis. My solution was based on Feather icons 3.3. Just upgraded to v4 and it is awesome. You did a great job.

I'll update the blog post soon.