title: Angular svg as template for component shown as text
body: <p>I'm currently trying to display a svg icon by using Angular component like this</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
      selector: 'app-profile-icon',
      templateUrl: './profile-icon.svg',
      styleUrls: ['./profile-icon.component.scss'],
  })
  export class ProfleIconComponent {
  }
  
  </code></pre>
  
  <p>An I call this element in a html file. This component is instantiated but with no svg content. Just the path of the svg with some random text.</p>
  
  <p><a href="https://i.stack.imgur.com/ZG50I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZG50I.png" alt="enter image description here"></a></p>
  
  <p>Is some Angular configuration I missed? Because it works fine if I wrote like this without the component, or just copy paste the svg content to a html template.</p>
  
  <pre><code>&lt;img src='./profile-icon.svg'&gt;
  </code></pre>
  
  <p>Thanks you very much.</p>