Scalable inline SVG icon component from the Eddie icon library. Icons can be rendered in two modes: 1. **Inline mode**...

Scalable inline SVG icon component from the Eddie icon library. Icons can be rendered in two modes: 1. **Inline mode** (default) — Looks up the icon's SVG content from the bundled icon map and renders it directly inline. Zero configuration required — just use `<ed-icon name="check">`. 2. **Sprite mode** — Uses `<use>` references to an external SVG sprite sheet. Activated by setting `globalThis.DS_ICON_URL` to a sprite URL. Useful for CDN deployments or custom icon sets. By default, icons are decorative (aria-hidden) unless an `iconTitle` property is set, which makes them semantic images with alt-text equivalent. Icons scale with their container and can be composed inside buttons, badges, links, and other components. Use the `inverted` property for dark-background contexts.

<ed-icon></ed-icon>

Properties

Name Type Default Description
focusable Boolean boolean | undefined Scalable inline SVG icon component from the Eddie icon library. Icons can be rendered in two modes: 1. **Inline mode** (default) — Looks up the icon's SVG content from the bundled icon map and renders it directly inline. Zero configuration required — just use `<ed-icon name="check">`. 2. **Sprite mode** — Uses `<use>` references to an external SVG sprite sheet. Activated by setting `globalThis.DS_ICON_URL` to a sprite URL. Useful for CDN deployments or custom icon sets. By default, icons are decorative (aria-hidden) unless an `iconTitle` property is set, which makes them semantic images with alt-text equivalent. Icons scale with their container and can be composed inside buttons, badges, links, and other components. Use the `inverted` property for dark-background contexts. / export class EdIcon extends EdElement { static get styles() { return unsafeCSS(styles); } /** Whether the SVG element should be focusable. By default, decorative icons are not focusable. Set to true for interactive icon elements.
name String string = 'search' The icon name to display. Must match a valid icon name from the Eddie icons library (e.g., "search", "menu", "close", "keyboard-arrow-right").
iconUrl String string = iconSprite URL path to the icon sprite SVG file. Setting this forces sprite mode, rendering via `<use>` references instead of inline SVG. Defaults to the bundled Eddie icons sprite.
iconTitle String string Accessible title for the icon. When set, the icon is rendered as a semantic image (role="img") with aria-labelledby. Omit for decorative icons.
inverted Boolean boolean Inverted color variant for dark backgrounds. Adjusts icon color for contrast and readability on dark surfaces.
styleModifier String string Additional CSS class names to append to the icon element's class list. Useful for utility classes or component-specific styling modifications.

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/icon/icon.ts