elastic / elastic/eui

[EuiIcon] Add an empty placeholder

Open
#9,967 0 comments 0 reactions 1 assignee Claimed by @weronikaolejniczak View on GitHub
icons
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

The purpose of this task is to add an empty placeholder for missing or unknown `EuiIcon` types instead of showing the browser's broken-image fallback.

Image

## Benchmark

Most design systems do **not** ship a special missing-icon picture. Closest peers to EUI (string `type` + runtime lookup) use empty + `console.error` (`console.warn` would get easily omitted in Kibana).

- **Font Awesome (SVG+JS)** - default `showMissingIcons: true`: animated `?` glyph. [docs](https://docs.fontawesome.com/apis/javascript/configuration)
- **Chakra UI v1/v2** - `` with no children → question-mark-in-circle. [docs](https://v2.chakra-ui.com/docs/components/icon)
- **Material Icons (font)** - unknown ligature → raw text / tofu. [FAQ](https://developers.google.com/fonts/faq) · [MUI](https://mui.com/material-ui/icons/)
- **Fluent UI v8** - unregistered `iconName` → `console.warn` + empty ``. [source](https://github.com/microsoft/fluentui/blob/master/packages/style-utilities/src/utilities/icons.ts) · [wiki](https://github.com/microsoft/fluentui/wiki/Using-icons)
- **Carbon Angular** - `IconNameNotFoundError` → `console.warn`, empty. [error](https://angular.carbondesignsystem.com/documentation/classes/IconNameNotFoundError.html) · [directive](https://angular.carbondesignsystem.com/documentation/directives/IconDirective.html)
- **Font Awesome React** — console error, no missing glyph. [issue](https://github.com/FortAwesome/react-fontawesome/issues/235)
- **MUI / Ant Design v4+ / Carbon React / Polaris / Spectrum / Primer Octicons / Atlassian / Cloudscape** - compile-time components; unknown names fail at TS/bundler time, no UI fallback. [MUI](https://mui.com/material-ui/icons/) · [Ant Design](https://ant.design/components/icon/) · [Polaris](https://polaris.shopify.com/components/images-and-icons/icon) · [Spectrum](https://react-spectrum.adobe.com/icons) · [Octicons](https://github.com/primer/octicons) · [Atlassian](https://atlassian.design/components/icon) · [Cloudscape](https://cloudscape.design/get-started/dev-guides/flexible-iconography/)
- **EUI today** - known icons while loading: blank `empty` SVG; unknown strings treated as URLs (``) → browser broken image.

**Takeaway:** a dedicated missing glyph is Font Awesome's pattern, not the React DS default. Empty placeholder matches Fluent and Carbon Angular.

## Acceptance criteria

- [ ] Unknown glyph doesn't result in the broken-image browser placeholder
- [ ] There is a runtime warning that warns about the missing icon

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.