Dynamically loading icons

Providing a loader

A loader is a function that receives the name of the requested icon and returns the SVG to render, as a string, a Promise or an Observable. It runs inside the injection context, so you can inject dependencies such as HttpClient.

import { provideNgIconLoader } from '@ng-icons/core';
import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';

bootstrapApplication(App, {
  providers: [
    provideNgIconLoader(name => {
      const http = inject(HttpClient);
      return http.get(`/assets/icons/${name}.svg`, { responseType: 'text' });
    }),
  ],
});

A loader does not reduce total bundle size on its own. It makes the icons load lazily, so they may appear blank until they have arrived.

Caching results

Add withCaching to the loader to avoid requesting the same icon more than once.

provideNgIconLoader(name => fetchIcon(name), withCaching());