{"record":{"id":"d11e7c88495cc073","repo":"angular/components","slug":"could-not-find-httpclient-for-use-with-angular-mat","errorCode":null,"errorMessage":"Could not find HttpClient for use with Angular Material icons. Please add provideHttpClient() to your providers.","messagePattern":"Could not find HttpClient for use with Angular Material icons\\. Please add provideHttpClient\\(\\) to your providers\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/material/icon/icon-registry.ts","lineNumber":636,"sourceCode":"    svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.\n\n    if (options && options.viewBox) {\n      svg.setAttribute('viewBox', options.viewBox);\n    }\n\n    return svg;\n  }\n\n  /**\n   * Returns an Observable which produces the string contents of the given icon. Results may be\n   * cached, so future calls with the same URL may not cause another HTTP request.\n   */\n  private _fetchIcon(iconConfig: SvgIconConfig): Observable<TrustedHTML> {\n    const {url: safeUrl, options} = iconConfig;\n    const withCredentials = options?.withCredentials ?? false;\n\n    if (!this._httpClient) {\n      throw getMatIconNoHttpProviderError();\n    }\n\n    // TODO: add an ngDevMode check\n    if (safeUrl == null) {\n      throw Error(`Cannot fetch icon from URL \"${safeUrl}\".`);\n    }\n\n    const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl);\n\n    // TODO: add an ngDevMode check\n    if (!url) {\n      throw getMatIconFailedToSanitizeUrlError(safeUrl);\n    }\n\n    // Store in-progress fetches to avoid sending a duplicate request for a URL when there is\n    // already a request in progress for that URL. It's necessary to call share() on the\n    // Observable returned by http.get() so that multiple subscribers don't cause multiple XHRs.\n    const inProgressFetch = this._inProgressUrlFetches.get(url);","sourceCodeStart":618,"sourceCodeEnd":654,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/icon/icon-registry.ts#L618-L654","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Add provideHttpClient() to the app root providers: bootstrapApplication(App, {providers: [provideHttpClient()]}) or providers: [provideHttpClient()] in AppModule.","In tests, add providers: [provideHttpClient(), provideHttpClientTesting()] and inject HttpTestingController to mock icon fetches.","In lazy/standalone contexts, add provideHttpClient(withFetch()) to the injector that configures MatIconRegistry, or register icons as literals (addSvgIconLiteral) to avoid HTTP entirely."],"exampleFix":"// before\nbootstrapApplication(AppComponent);\n// after\nbootstrapApplication(AppComponent, { providers: [provideHttpClient()] });","handlingStrategy":"validation","validationCode":"import { HttpClient } from '@angular/common/http';\n// in app.config.ts / main providers:\nproviders: [provideHttpClient()]\n// runtime pre-check in an icon initializer:\nfunction provideIcons(): Provider[] {\n  return [\n    provideHttpClient(),\n    {\n      provide: APP_INITIALIZER,\n      useFactory: (injector: Injector) => () => {\n        if (!injector.get(HttpClient, null)) {\n          throw new Error('provideHttpClient() required for MatIconRegistry');\n        }\n      },\n      deps: [Injector],\n      multi: true,\n    },\n  ];\n}","typeGuard":"function hasHttpClient(injector: Injector): boolean {\n  return injector.get(HttpClient, null) !== null;\n}","tryCatchPattern":"try {\n  await firstValueFrom(registry.getNamedSvgIcon('gear'));\n} catch (e) {\n  if ((e as Error).message.includes('Could not find HttpClient')) {\n    console.error('Add provideHttpClient() to your providers');\n  } else { throw e; }\n}","preventionTips":["Add provideHttpClient() to root providers when using MatIconRegistry URL-based icons","In tests, pair provideHttpClient() with provideHttpClientTesting()","Prefer addSvgIconLiteral for icons bundled with the app to remove the HTTP dependency"],"tags":["angular","http-client","dependency-injection","icon-registry"],"backgroundTag":"missing-http-client-provider","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}