{"record":{"id":"fa1d15b4c5940e2d","repo":"angular/components","slug":"invalid-icon-name-iconname","errorCode":null,"errorMessage":"Invalid icon name: \"${iconName}\"","messagePattern":"Invalid icon name: \"(.+?)\"","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/material/icon/icon.ts","lineNumber":285,"sourceCode":"   * Throws an error if the name contains two or more ':' separators.\n   * Examples:\n   *   `'social:cake' -> ['social', 'cake']\n   *   'penguin' -> ['', 'penguin']\n   *   null -> ['', '']\n   *   'a:b:c' -> (throws Error)`\n   */\n  private _splitIconName(iconName: string): [string, string] {\n    if (!iconName) {\n      return ['', ''];\n    }\n    const parts = iconName.split(':');\n    switch (parts.length) {\n      case 1:\n        return ['', parts[0]]; // Use default namespace.\n      case 2:\n        return <[string, string]>parts;\n      default:\n        throw Error(`Invalid icon name: \"${iconName}\"`); // TODO: add an ngDevMode check\n    }\n  }\n\n  ngOnInit() {\n    // Update font classes because ngOnChanges won't be called if none of the inputs are present,\n    // e.g. <mat-icon>arrow</mat-icon> In this case we need to add a CSS class for the default font.\n    this._updateFontIconClasses();\n  }\n\n  ngAfterViewChecked() {\n    const cachedElements = this._elementsWithExternalReferences;\n\n    if (cachedElements && cachedElements.size) {\n      const newPath = this._location.getPathname();\n\n      // We need to check whether the URL has changed on each change detection since\n      // the browser doesn't have an API that will let us react on link clicks and\n      // we can't depend on the Angular router. The references need to be updated,","sourceCodeStart":267,"sourceCodeEnd":303,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/icon/icon.ts#L267-L303","documentation":"MatIcon._splitIconName splits the svgIcon input on ':' into [namespace, name]; names with more than one colon cannot be parsed, so it throws 'Invalid icon name'. Valid forms are 'name' (default namespace) or 'namespace:name'.","triggerScenarios":"Setting <mat-icon [svgIcon]=\"expr\"> where expr contains two or more colons, e.g. 'ns:a:b', or binding an icon key from config data that includes colons (full URLs, FontAwesome 'fa:xxx:y').","commonSituations":"Feeding icon identifiers from CMS/backend data that use ':' as separators; concatenating strings and accidentally double-joining; passing an entire URL as the icon name.","solutions":["Ensure the bound string matches 'name' or 'namespace:name' with at most one colon.","Pre-process icon keys: strip or replace extra colons before binding, e.g. name.split(':').slice(0,2).join(':').","Register/lookup with a namespace argument instead of encoding it in the name when data is unreliable."],"exampleFix":"// before\n<mat-icon [svgIcon]=\"'fa:home:regular'\"></mat-icon>\n// after\n<mat-icon [svgIcon]=\"'fa:home'\"></mat-icon>","handlingStrategy":"validation","validationCode":"const ICON_NAME_RE = /^(?!.*:.*:)[\\w-]+(?::[\\w-]+)?$/;\nif (!ICON_NAME_RE.test(iconName)) {\n  throw new Error(`Icon name must be \"name\" or \"namespace:name\": got \"${iconName}\"`);\n}\nicon.svgIcon = iconName;","typeGuard":"function isValidIconName(v: unknown): v is string {\n  return typeof v === 'string' &&\n    /^[\\w-]+(?::[\\w-]+)?$/.test(v) &&\n    (v.match(/:/g) ?? []).length <= 1;\n}","tryCatchPattern":"try {\n  icon.svgIcon = rawKey;\n} catch (e) {\n  if ((e as Error).message.startsWith('Invalid icon name')) {\n    icon.svgIcon = rawKey.split(':').slice(0, 2).join(':');\n  } else { throw e; }\n}","preventionTips":["Normalize backend/CMS icon keys before binding them to [svgIcon]","Keep icon identifiers colon-free except for the single namespace separator","Type icon name unions as 'name' | `${string}:${string}` to catch bad keys at compile time"],"tags":["angular-material","mat-icon","validation"],"backgroundTag":"invalid-icon-name","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}