{"record":{"id":"7bc2fc547b52e40d","repo":"feathericons/feather","slug":"feather-name-is-not-a-valid-icon","errorCode":null,"errorMessage":"feather: '${name}' is not a valid icon","messagePattern":"feather: '(.+?)' is not a valid icon","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/replace.js","lineNumber":35,"sourceCode":"\n  Array.from(elementsToReplace).forEach(element =>\n    replaceElement(element, attrs),\n  );\n}\n\n/**\n * Replace a single HTML element with SVG markup\n * corresponding to the element's `data-feather` attribute value.\n * @param {HTMLElement} element\n * @param {Object} attrs\n */\nfunction replaceElement(element, attrs = {}) {\n  const elementAttrs = getAttrs(element);\n  const name = elementAttrs['data-feather'];\n  delete elementAttrs['data-feather'];\n\n  if (icons[name] === undefined) {\n    console.warn(`feather: '${name}' is not a valid icon`);\n    return;\n  }\n\n  const svgString = icons[name].toSvg({\n    ...attrs,\n    ...elementAttrs,\n    ...{ class: classnames(attrs.class, elementAttrs.class) },\n  });\n  const svgDocument = new DOMParser().parseFromString(\n    svgString,\n    'image/svg+xml',\n  );\n  const svgElement = svgDocument.querySelector('svg');\n\n  element.parentNode.replaceChild(svgElement, element);\n}\n\n/**","sourceCodeStart":17,"sourceCodeEnd":53,"githubUrl":"https://github.com/feathericons/feather/blob/3dc050d97405062eba78aa57115c0a15c63abdaa/src/replace.js#L17-L53","documentation":"replaceElement reads the element's `data-feather` attribute and looks the value up in the icons map. If no icon matches, it does not throw — it logs this console.warn and leaves the element untouched (with the data-feather attribute removed). The SOURCE confirms this is a warning path, not an exception.","triggerScenarios":"An element like <i data-feather=\"fake-icon\"></i> exists in the DOM when feather.replace() runs and 'fake-icon' is not in feather.icons (typo, wrong casing, icon not in installed version).","commonSituations":"CMS- or user-supplied icon names rendered into HTML; typos in template files; icons referenced in shared components that don't exist in the feather set; casing drift like data-feather=\"ArrowRight\".","solutions":["Correct the data-feather value to a valid feather icon name (kebab-case, see https://feathericons.com).","Check the console for the warning during development and fix offending elements.","Whitelist/validate icon names before injecting them into HTML.","If an icon doesn't exist in feather, use another set or a custom SVG instead."],"exampleFix":"// before\n<i data-feather=\"ArrowRight\"></i>\n\n// after\n<i data-feather=\"arrow-right\"></i>","handlingStrategy":"validation","validationCode":"const el = document.querySelector('[data-feather]');\nconst name = el && el.getAttribute('data-feather');\nif (name && !(name in feather.icons)) console.warn(`Bad icon: ${name}`);","typeGuard":"const isValidIconAttr = (v: string | null): v is string => v !== null && v in feather.icons;","tryCatchPattern":"try-catch is not applicable: replaceElement warns via console.warn and returns without throwing. Capture console.warn in tests:\nconst spy = jest.spyOn(console, 'warn').mockImplementation();\nfeather.replace();\nexpect(spy).not.toHaveBeenCalledWith(expect.stringContaining('is not a valid icon'));","preventionTips":["Validate data-feather values against feather.icons at build time","Use a component wrapper that only renders known icon names","Monitor console.warn in development for unmatched icons","Never feed user/CMS-supplied strings directly into data-feather without whitelisting"],"tags":["console-warning","icon-name","dom","invalid-attribute"],"backgroundTag":"unknown-icon-name","analyzedSha":"3dc050d97405062eba78aa57115c0a15c63abdaa","analyzedAt":"2026-08-30T12:01:49.665Z","schemaVersion":2},"datasetVersion":"2026-08-30T13:17:10.514Z"}