Angular 2 Icon System
Here is the “Angular Icon System” rebuilt for angular 2. Converting it to angular 2 did provide some syntactic sugar, the component otherwise remains mostly the same.
Link to Plunker example
svg-icon.component.ts
import { Component, OnChanges, Input } from '@angular/core';
import { NgStyle } from '@angular/common/index';
@Component({
selector: 'svg-icon',
template:
`<svg class="icon" [ngStyle]="svgStyle">
<use attr.xlink:href="#"></use>
</svg>`,
styleUrls: ['./svg-icon.component.css']
})
export class SvgIconComponent implements OnChanges {
@Input() iconName: string;
@Input() iconSize: number;
svgSymbolId: string;
svgStyle: object;
ngOnChanges(changes: SimpleChanges) {
if (changes.iconName) {
this.svgSymbolId = changes.iconName.currentValue;
}
if (changes.iconSize) {
this.svgStyle = { 'font-size': changes.iconSize.currentValue };
}
}
}svg-icon.component.css
.icon {
fill: currentColor;
width: 1em;
height: 1em;
}HTML usage
<svg-icon [iconName]="'apartment'" [iconSize]="40"><svg-icon>