ng2-inline-svg

ng2-inline-svg

Demo

Angular 2 directive for inserting an SVG file inline within an element.

Based on md-icon, except this is meant purely for inserting SVG files within an element, without the extra things like font icons.

Installation

npm install --save ng2-inline-svg

Usage

Make sure to add HTTP_PROVIDERS to your bootstrap providers:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { App } from './app/app.component';

bootstrap(App, [HTTP_PROVIDERS]);

Import the component and add it to the list of directives on your component:

import { Component } from '@angular/core';
import InlineSVG from 'ng2-inline-svg';

@Component({
  selector: 'demo',
  directives: [InlineSVG],
  template: `
    <div class="demo-svg" aria-label="My icon" [inline-svg]="'/img/image.svg'"></div>
  `
})
export class DemoComponent {
}

The SVG file (if found) will be inserted inside the element with the [inline-svg] directive.