Skip to content

[EuiIcon] Add an empty placeholder #9967

Description

@weronikaolejniczak

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
  • Chakra UI v1/v2 - <Icon /> with no children → question-mark-in-circle. docs
  • Material Icons (font) - unknown ligature → raw text / tofu. FAQ · MUI
  • Fluent UI v8 - unregistered iconNameconsole.warn + empty <i>. source · wiki
  • Carbon Angular - IconNameNotFoundErrorconsole.warn, empty. error · directive
  • Font Awesome React — console error, no missing glyph. issue
  • 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 · Ant Design · Polaris · Spectrum · Octicons · Atlassian · Cloudscape
  • EUI today - known icons while loading: blank empty SVG; unknown strings treated as URLs (<img src>) → 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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

Type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions