{"record":{"id":"612610c5b9760719","repo":"angular/components","slug":"unable-to-find-icon-with-the-name-name","errorCode":null,"errorMessage":"Unable to find icon with the name \"${name}\"","messagePattern":"Unable to find icon with the name \"(.+?)\"","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/material/icon/icon-registry.ts","lineNumber":462,"sourceCode":"\n            // Swallow errors fetching individual URLs so the\n            // combined Observable won't necessarily fail.\n            const errorMessage = `Loading icon set URL: ${url} failed: ${err.message}`;\n            this._errorHandler.handleError(new Error(errorMessage));\n            return observableOf(null);\n          }),\n        );\n      });\n\n    // Fetch all the icon set URLs. When the requests complete, every IconSet should have a\n    // cached SVG element (unless the request failed), and we can check again for the icon.\n    return forkJoin(iconSetFetchRequests).pipe(\n      map(() => {\n        const foundIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs);\n\n        // TODO: add an ngDevMode check\n        if (!foundIcon) {\n          throw getMatIconNameNotFoundError(name);\n        }\n\n        return foundIcon;\n      }),\n    );\n  }\n\n  /**\n   * Searches the cached SVG elements for the given icon sets for a nested icon element whose \"id\"\n   * tag matches the specified name. If found, copies the nested element to a new SVG element and\n   * returns it. Returns null if no matching element is found.\n   */\n  private _extractIconWithNameFromAnySet(\n    iconName: string,\n    iconSetConfigs: SvgIconConfig[],\n  ): SVGElement | null {\n    // Iterate backwards, so icon sets added later have precedence.\n    for (let i = iconSetConfigs.length - 1; i >= 0; i--) {","sourceCodeStart":444,"sourceCodeEnd":480,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/icon/icon-registry.ts#L444-L480","documentation":"When resolving an icon by name, the registry fetches all icon-set configs that may contain it and extracts the named SVG. If no set defines the name after all fetches complete, it throws this error because the requested icon simply isn't registered.","triggerScenarios":"Using <mat-icon svgIcon=\"namespace:iconName\"> (or getNamedSvgIcon) where the name was never registered via addSvgIcon/addSvgIconLiteral/addSvgIconSet, a namespace typo, or the icon missing from a remote SVG set file (or the fetch failing silently upstream).","commonSituations":"Icon name or namespace case-mismatch with registration; remote sprite updated and the icon renamed/removed; registration code (AppInit/bootstrapping) not run before first render; using svgIcon when the icon was registered without a namespace prefix (or vice versa).","solutions":["Register the icon first: MatIconRegistry.addSvgIcon(name, url) or addSvgIconLiteral(name, html), ideally in an APP_INITIALIZER.","Verify exact name and namespace spelling/case (e.g. 'name' vs 'namespace:name').","Open the icon-set SVG and confirm the <symbol>/<g id=\"...\"> with that name exists.","Check that the set's HTTP fetch isn't failing (network/404) — a failed fetch leaves the icon unresolvable."],"exampleFix":"// before\n// template: <mat-icon svgIcon=\"custom:home\"></mat-icon>  (never registered)\n// after\n// in app initializer:\nregistry.addSvgIconLiteralInNamespace(\n  'custom', 'home',\n  sanitizer.bypassSecurityTrustHtml('<svg>...</svg>'),\n);","handlingStrategy":"validation","validationCode":"// before rendering an svgIcon, verify registration\nasync function assertIconRegistered(registry: MatIconRegistry, name: string) {\n  try { await registry.getNamedSvgIcon(name).toPromise(); }\n  catch { throw new Error(`Icon \"${name}\" must be registered in APP_INITIALIZER`); }\n}","typeGuard":null,"tryCatchPattern":"try {\n  await firstValueFrom(registry.getNamedSvgIcon(name));\n} catch (e) {\n  if (e instanceof Error && e.message.startsWith('Unable to find icon')) {\n    console.warn(`Icon \"${name}\" missing — falling back to default icon.`);\n    this.fallbackIcon = 'default';\n  } else { throw e; }\n}","preventionTips":["Register all named SVG icons in an APP_INITIALIZER factory before app render.","Keep icon name constants in a shared file to avoid typos/case mismatches.","Verify icon names exist in remote sprite files whenever the sprite is updated."],"tags":["angular-material","icon-registry","missing-icon","registration"],"backgroundTag":"icon-not-registered","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-09-01T08:17:40.651Z"}