D-Net

import {Component, ElementRef, Input, OnInit} from "@angular/core";

import {IconsService} from "./icons.service";

/**

 * First add your icon to Icon registry, by adding this to your component Module.

 *

 * e.g export class ExampleModule {

 *  constructor(private iconsService: IconsService) {

 *    this.iconsService.registerIcons([arrow_right])

 *  }

 * }

 *

 * */

@Component({

  selector: 'icon',

  template: `

    <span *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>

  `

})

export class IconsComponent implements OnInit{

  public svg;

  public style;

  /**

   * True if this icon should have display flex (Optional, Default: false)

   * */

  @Input()

  public flex = false;

  /**

   *

   * Add custom class(es)(Optional)

   * */

  @Input()

  public customClass;

  /**

   * Color of svg (Optional)

   * */

  @Input()

  public fill;

  /**

   * Color of svg stroke (Optional)

   * */

  @Input()

  public stroke;

  /**

   * Size of svg (Default: 1)

   * */

  @Input()

  public ratio = 1;

  /**

   * Name of icon in registry (Required)

   * */

  @Input()

  set name(iconName: string) {

    this.svg = this.iconsService.getIcon(iconName);

  }

  constructor(private iconsService: IconsService,

              private elementRef: ElementRef) {}

  ngOnInit() {

    this.style = {

      transform: 'scale(' + this.ratio + ')',

      fill: this.fill,

      stroke: this.stroke

    };

    //this.elementRef.nativeElement.style = 'line-height: ' + this.ratio*20 + 'px; height: 20px';

  }

}