import { HttpClientModule } from '@angular/common/http';
import { InlineSVGModule } from 'ng-inline-svg';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, InlineSVGModule.forRoot()],
  bootstrap: [AppComponent]
})
class AppModule {}

InlineSVGModule.forRoot({ baseUrl: 'https://mysite.com/myapp/' })

@Component({
  selector: 'app',
  template: `
    <div class="my-icon" aria-label="My icon" [inlineSVG]="'/img/image.svg'"></div>
  `
})
export class AppComponent {}

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { InlineSVGConfig } from 'ng-inline-svg';
import { SVGConfig } from './svg-config';

@NgModule({
  providers: [
    { provide: InlineSVGConfig, useClass: SVGConfig }
  ]
})
export class AppServerModule {}

import { Injectable, Inject } from '@angular/core';
import { InlineSVGConfig } from 'ng-inline-svg';

@Injectable()
export class SVGConfig extends InlineSVGConfig {
  // Do what ever conditions you need to set this, e.g. checking for server-side rendering
  // and only set baseURL when server-side rendered if you want.

  constructor(...) {
    super();

    // When the server-side rendered app runs on localhost:3000, make sure baseURL is
    // http://localhost:3000 and make sure the Express server is configured properly to
    // allow the URL of the asset folders storing the SVG files.
    this.baseUrl = 'http://localhost:3000';

    // If you don't want the directive to run on the server side.
    this.clientOnly = true;

    // If you want to bypass your HttpClient interceptor chain when fetching SVGs.
    this.bypassHttpClientInterceptorChain = true;
  }
}