title: Angular Universal / SSR nativeElement.innerHTML and renderer.setProperty throws Error: NotYetImplemented
body: <p>I have below component to render svg icons:</p>
  <p><strong>Component</strong></p>
  <pre><code>import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';
  
  @Component({
    selector: 'icon-svg',
    templateUrl: './icon-svg.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class IconSVGComponent {
    @ViewChild('svgElement', { static: false }) svgElement: ElementRef;
  
    @Input() icon: string;
    @Input() fill: string = 'currentColor';
    @Input() width: number = null;
    @Input() height: number = null;
    @Input() alt: string;
  
    public svg: string;
  
    public viewBox = &quot;0 0 24 24&quot;;
  
    constructor() {
    }
  
    ngOnInit() {
      let icons = {
        'business': { value: '&lt;path d=&quot;M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z&quot; /&gt;' },
        'person': { value: '&lt;path d=&quot;M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z&quot; /&gt;' },
        'menu': { value: '&lt;path d=&quot;M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z&quot; /&gt;' },
        'search': { value: '&lt;path d=&quot;M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z&quot; /&gt;' },
        'close': { value: '&lt;path d=&quot;M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z&quot; /&gt;' }
      };
  
      let icon = icons[this.icon].value;
      if (icon) {
        this.svg = icon;
        if (this.icon == 'facebook' || this.icon == 'linkedin' || this.icon == 'twitter' || this.icon == 'whatsapp') {
          this.viewBox = &quot;0 0 512 512&quot;;
        }
      }
    }
  
    ngAfterViewInit() {
      this.svgElement.nativeElement.innerHTML = this.svg;
    }
  }
  </code></pre>
  <p><strong>Template</strong></p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; [attr.fill]=&quot;fill&quot; [attr.viewBox]=&quot;viewBox&quot; [attr.width]=&quot;width&quot; [attr.height]=&quot;height&quot; class=&quot;svg-icon&quot; #svgElement&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>This works fine in browser but throws below error in Angular Universal/SSR.</p>
  <pre><code>Error: NotYetImplemented
      at Element.Wo4J.exports.nyi (D:\ClientApp\dist-server\main.js:1:1616260)
      at IconSVGComponent.ngAfterViewInit (D:\ClientApp\dist-server\main.js:1:3046674)
  </code></pre>
  <p>I have also tried it with <code>renderer.setProperty</code>, but even that doesnt work and throws below error:</p>
  <pre><code>Error: NotYetImplemented
      at Element.Wo4J.exports.nyi (D:\ClientApp\dist-server\main.js:1:1616260)
      at platform_server_DefaultServerRenderer2.setProperty (D:\ClientApp\dist-server\main.js:1:1264487)
      at BaseAnimationRenderer.setProperty (D:\ClientApp\dist-server\main.js:1:1527203)
      at IconSVGComponent.ngAfterViewInit (D:\ClientApp\dist-server\main.js:1:3046680)
  </code></pre>
  <p>Can anyone please guide how to fix this and make it work on server/ssr?</p>