Streamline Icons Angular

streamline-icon.component.html

<span [innerHTML]="svgContent" (click)="onClick($event)" [ngClass]="(fill.length > 0 || stroke.length > 0) ? '' : 'icon-bg'" #element></span>

streamline-icon.component.scss

:host ::ng-deep {
  span.icon-bg svg path {
    stroke: #161616;
  }
}

streamline-icon.component.ts

import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';

const defaultSize = 24;

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'streamline-icon',
  templateUrl: './streamline-icon.component.html',
  styleUrls: ['./streamline-icon.component.scss']
})
export class StreamlineIconComponent implements OnInit {
  @Input() size = defaultSize;
  @Input() width = defaultSize;
  @Input() height = defaultSize;
  @Input() stroke = '';
  @Input() fill = '';
  @Input() icon = '';
  @Input() rawSVG = true;
  @Input() class = '';

  @ViewChild('element', { static: true }) element: ElementRef;

  // tslint:disable-next-line:no-output-native
  @Output() click = new EventEmitter<MouseEvent>();

  svgContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    this.sanitizeRawSVG(this.preprocessSVG());
  }

  private preprocessSVG() {
    const svgWrapper = document.createElement('div');
    svgWrapper.innerHTML = this.icon;
    const svgElement = svgWrapper.querySelector("svg");

    if (this.stroke.length > 0) {
      svgElement.querySelectorAll('[stroke]').forEach(ele => ele.setAttribute('stroke', this.stroke));
    }
    if (this.fill.length > 0) {
      svgElement.querySelectorAll('[fill]').forEach(ele => ele.setAttribute('fill', this.fill));
    }
    if (this.size !== defaultSize) {
      svgElement.setAttribute('width', `${this.size}px`);
      svgElement.setAttribute('height', `${this.size}px`);
    }
    if (this.width !== defaultSize) {
      svgElement.setAttribute('width', `${this.width}px`);
    }
    if (this.height !== defaultSize) {
      svgElement.setAttribute('height', `${this.height}px`);
    }

    return svgWrapper.innerHTML;
  }

  private sanitizeRawSVG(svgContent: string) {
    this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svgContent);
  }

  onClick($event: MouseEvent) {
    this.click.emit($event);
  }
}

streamline-icon.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StreamlineIconComponent } from './streamline-icon.component';

@NgModule({
  declarations: [StreamlineIconComponent],
  exports: [StreamlineIconComponent],
  imports: [
    CommonModule
  ]
})
export class StreamlineIconModule { }

usage-component.ts

/// <reference path="../../../src/streamline.d.ts" />
import {Component} from '@angular/core';
import SynchronizeArrows1
  from '!!raw-loader!@streamlinehq/streamlinehq/img/streamline-regular/synchronize-arrows-1-iJ4OuD.svg';

@Component({
  selector: 'app-foo-component',
  template: '<streamline-icon [width]="16" [height]="16" [icon]="refreshIcon" role="button"></streamline-icon>',
  styleUrls: ['./foo.component.scss']
})
export class TableActionsComponent {
  refreshIcon = SynchronizeArrows1;
}