angular/components · error

Could not find HttpClient for use with Angular Material icon

Error message

Could not find HttpClient for use with Angular Material icons. Please add provideHttpClient() to your providers.

What it means

MatIconRegistry needs Angular's HttpClient to download icon SVGs from URLs registered with addSvgIcon/addSvgIconInNamespace. When _fetchIcon runs and no HttpClient was injected, the registry throws with an explicit hint to add provideHttpClient(). The HttpClient is an optional dependency, so the error surfaces only at fetch time, not at startup.

Source

Thrown at src/material/icon/icon-registry.ts:636

    svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.

    if (options && options.viewBox) {
      svg.setAttribute('viewBox', options.viewBox);
    }

    return svg;
  }

  /**
   * Returns an Observable which produces the string contents of the given icon. Results may be
   * cached, so future calls with the same URL may not cause another HTTP request.
   */
  private _fetchIcon(iconConfig: SvgIconConfig): Observable<TrustedHTML> {
    const {url: safeUrl, options} = iconConfig;
    const withCredentials = options?.withCredentials ?? false;

    if (!this._httpClient) {
      throw getMatIconNoHttpProviderError();
    }

    // TODO: add an ngDevMode check
    if (safeUrl == null) {
      throw Error(`Cannot fetch icon from URL "${safeUrl}".`);
    }

    const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl);

    // TODO: add an ngDevMode check
    if (!url) {
      throw getMatIconFailedToSanitizeUrlError(safeUrl);
    }

    // Store in-progress fetches to avoid sending a duplicate request for a URL when there is
    // already a request in progress for that URL. It's necessary to call share() on the
    // Observable returned by http.get() so that multiple subscribers don't cause multiple XHRs.
    const inProgressFetch = this._inProgressUrlFetches.get(url);

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add provideHttpClient() to the app root providers: bootstrapApplication(App, {providers: [provideHttpClient()]}) or providers: [provideHttpClient()] in AppModule.
2. In tests, add providers: [provideHttpClient(), provideHttpClientTesting()] and inject HttpTestingController to mock icon fetches.
3. In lazy/standalone contexts, add provideHttpClient(withFetch()) to the injector that configures MatIconRegistry, or register icons as literals (addSvgIconLiteral) to avoid HTTP entirely.

Example fix

// before
bootstrapApplication(AppComponent);
// after
bootstrapApplication(AppComponent, { providers: [provideHttpClient()] });

import { HttpClient } from '@angular/common/http';
// in app.config.ts / main providers:
providers: [provideHttpClient()]
// runtime pre-check in an icon initializer:
function provideIcons(): Provider[] {
  return [
    provideHttpClient(),
    {
      provide: APP_INITIALIZER,
      useFactory: (injector: Injector) => () => {
        if (!injector.get(HttpClient, null)) {
          throw new Error('provideHttpClient() required for MatIconRegistry');
        }
      },
      deps: [Injector],
      multi: true,
    },
  ];
}

function hasHttpClient(injector: Injector): boolean {
  return injector.get(HttpClient, null) !== null;
}

try {
  await firstValueFrom(registry.getNamedSvgIcon('gear'));
} catch (e) {
  if ((e as Error).message.includes('Could not find HttpClient')) {
    console.error('Add provideHttpClient() to your providers');
  } else { throw e; }
}

When it happens

Trigger: Calling registry.addSvgIcon(name, url) and then rendering <mat-icon [svgIcon]="name"> in an app (or standalone component, or test) that does not provide HttpClient.

Common situations: Standalone components without provideHttpClient() in providers; apps migrated to standalone bootstrap missing importProvidersFrom(HttpClientModule); Angular Material tests (MatIconRegistry harness) without Testbed.configureTestingModule({providers: [provideHttpClient(), provideHttpClientTesting()]}); bumping Angular versions where HttpClientModule was dropped.

Related errors

• expected an instance of PointerFocusTracker to be provided
• expected a reference to the parent menu
• Cannot attach component portal to outlet without an Applicat
• MatDatepicker: No provider found for MAT_DATE_FORMATS. You m
• MatDatepicker: No provider found for DateAdapter. You must a

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/d11e7c88495cc073. Report an issue: GitHub.