title: Angular reusable component that displays SVG icons has width/height not set anywhere & positioned right under the icon, stackblitz inside
body: <p><a href="https://stackblitz.com/edit/angular-okjsk4?file=src%2Fapp%2Ficon.component.html" rel="nofollow noreferrer">Stackblitz link here.</a></p>
  
  <p>So I'm using global icon-definitions loaded in app component once and then poiting to it throughout my app with this reusable icon. </p>
  
  <p>For the most part it works well &amp; nice but for some reason I noticed that the positioning of the SVG is outside the boundaries of the icon component and instead it shows up as some empty div at the bottom of the SVG, screenshot: </p>
  
  <p><a href="https://i.stack.imgur.com/6nhu5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6nhu5.png" alt="enter image description here"></a></p>
  
  <p>This is the relevant icon component code:</p>
  
  <pre><code>&lt;svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      [style.width]="width ? width : size"
      [style.height]="height ? height : size"
      [style.margin]="margin ? margin : '0'"
      [style.padding]="padding ? padding : '0'"
  &gt;
      &lt;use [style.fill]="color ? color : 'white'" [attr.xlink:href]="absUrl + '#' + name"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  
  </code></pre>
  
  <p>and the actual ts code:</p>
  
  <pre><code>import { Component, ChangeDetectionStrategy, Input } from "@angular/core";
  
  @Component({
      selector: "icon",
      templateUrl: "./icon.component.html",
      styleUrls: ["./icon.component.scss"],
      changeDetection: ChangeDetectionStrategy.OnPush,
  })
  export class IconComponent {
      @Input() name: string;
      @Input() size: string;
      @Input() color: string;
      @Input() width?: string;
      @Input() height?: string;
      @Input() margin?: string;
      @Input() padding?: string;
      get absUrl() {
          return window.location.href.split("#")[0];
      }
  }
  
  </code></pre>
  
  <p>I've tried to set line-height and icon height to 0 with !important which does not work/affect anything at all. </p>
  
  <p>However if I set the whole icon div to hidden, the SVG won't display either. </p>
  
  <p>Not sure what else to try, thanks!</p>