SVG as component template

Did you know that it's possible to use SVG file as your component template? By this it's possible to take advantage of Angular features like binding and create advanced graphics.

Example shows icon component in which it is possible to manipulate position of the center of the circle.

  <svg>
    <circle [attr.cx]="x" [attr.cy]="y" r="50"></circle>
  </svg>

  import {Component, Input} from '@angular/core';

  @Component({
    selector: 'app-icon',
    templateUrl: './icon.svg',
    styleUrls: ['./icon.component.css']
  })
  export class IconComponent {
    @Input()
    x = 50;
    @Input()
    y = 50;
  }

Actually, I hadn't realised that possibility before, although when you think about it it is quite obvious. Can't wait to use it in work, and you?