title: angular, unable to dynamically load custom mat-icon with [svgIcon]="lItem.svgIcon"
body: <p>Using angular 8, I'm unable to load dynamically a custom svgIcon. </p>
  
  <h2>Description</h2>
  
  <p>Into my <code>component.html</code> I have</p>
  
  <pre><code>      &lt;div *ngFor="let lItem of node.nodeInformationsArray" class="itemDetails" [class]="lItem.cssClass"&gt;
            &lt;button mat-icon-button *ngIf="lItem.hasOwnProperty('icon') || lItem.hasOwnProperty('svgIcon')" aria-hidden="false"
            class="material-icons-outlined" [matTooltip]="lItem.tooltip"&gt;
            &lt;mat-icon *ngIf="lItem.icon"&gt;{{lItem.icon}}&lt;/mat-icon&gt;
            &lt;mat-icon *ngIf="lItem.svgIcon" [svgIcon]="lItem.icon"&gt;&lt;/mat-icon&gt;
            &lt;span *ngIf="lItem.txt" class="itemTxt"&gt;{{lItem.txt}}&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>In this code <strong>trying to have a common solution</strong> for both <a href="https://material.io/resources/icons/?style=baseline" rel="nofollow noreferrer">angular material icons</a> and custom icons, I tried to avoid the <code>svgIcon</code> solution and line, but if I specify into the innerHtml of <code>mat-icon</code> the path for ng material icons I get errors on console. </p>
  
  <pre><code>&lt;mat-icon *ngIf="lItem.svgIcon" svgIcon="inverter"&gt;&lt;/mat-icon&gt;
  </code></pre>
  
  <p>So I tried to add both an <code>lItem.icon</code> and <code>lItem.svgIcon</code> <strong>which works statically</strong> (with in my case 'inverter' as registrered icon on my <code>.ts</code> constructor, which tells me the registering, url, and so on is not the problem here. Note that</p>
  
  <pre><code>&lt;mat-icon *ngIf="lItem.svgIcon" svgIcon="{{lItem.icon}}"&gt;&lt;/mat-icon&gt;
  </code></pre>
  
  <p>doesn't work either.</p>
  
  <h2>My dream and hopes</h2>
  
  <pre><code>      &lt;div *ngFor="let lItem of node.nodeInformationsArray" class="itemDetails" [class]="lItem.cssClass"&gt;
            &lt;button mat-icon-button *ngIf="lItem.hasOwnProperty('icon') || lItem.hasOwnProperty('svgIcon')" aria-hidden="false"
            class="material-icons-outlined" [matTooltip]="lItem.tooltip"&gt;
            &lt;mat-icon *ngIf="lItem.icon"&gt;{{lItem.icon}}&lt;/mat-icon&gt;
            &lt;span *ngIf="lItem.txt" class="itemTxt"&gt;{{lItem.txt}}&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>working with both custom svgIcons and angular material icons, just by registering my custom icon into my constructor</p>