ngx-fast-svg

Two methods

config(url) turns the value of your url option into the final URL and may be asynchronous: here it reads the base path from a signal. With the missing folder the requests fail and the icons keep the suspense placeholder. load(url$) fetches the markup: here it is the default strategy plus a delay.

svg-load.strategies.ts

@Injectable()
export class DemoSvgLoadStrategy extends SvgLoadStrategyImpl {
  private readonly settings = inject(DemoSettings);
  private readonly basePath$ = toObservable(this.settings.basePath);

  // Resolve the final URL. Async, from a signal.
  override config(url: string): Observable<string> {
    return this.basePath$.pipe(
      take(1),
      map((base) => `${base}/${url}`)
    );
  }

  // Fetch the markup. The default fetch, plus a delay.
  override load(url$: Observable<string>): Observable<string> {
    return super.load(url$).pipe(delay(this.settings.latencyMs()));
  }
}

provideFastSVG({
  url: (name) => `${name}.svg`, // config() adds the folder
  svgLoadStrategy: DemoSvgLoadStrategy,
});

a lazy configuration

@Injectable()
export class LazyConfigSvgLoadStrategy extends SvgLoadStrategyImpl {
  private readonly runtimeConfig = inject(RuntimeConfigService);

  override config(url: string): Observable<string> {
    // Emits once the runtime config has loaded; icons show the
    // suspense placeholder until then.
    return this.runtimeConfig.assetBase$.pipe(
      take(1),
      map((base) => `${base}/${url}`)
    );
  }
}