{
  "tag": "ed-icon",
  "kind": "component",
  "summary": "Icons are symbols that can be used to represent various options within an application.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/icon/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/icon/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "Reinforcing a visible text label — on buttons, in navigation, beside statuses — so users recognize the action faster without losing certainty",
    "A symbol before a button label such as Add or Export, so a clerk finds the action quickly in a busy toolbar",
    "A symbol beside a state text such as paid, open or overdue, to support the word without replacing it",
    "A navigation entry with a recognizable symbol and a visible label, so users find sections by habit"
  ],
  "notFor": [
    {
      "when": "A control that has only an icon and no visible text",
      "instead": "a [Button](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button) with a visible text label"
    },
    {
      "when": "A colored status that must be readable at a glance in a list",
      "instead": "a [Badge](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/badge) with a text label"
    }
  ],
  "rules": [
    {
      "id": "icon/reinforce-text",
      "rule": "Use icons to accent and reinforce visible text, never to replace it, and never justify one with \"everyone knows this one\" — the visible label must carry the meaning on its own.",
      "why": "An icon alone is ambiguous. Usability research — eurodata's own and industry-wide — shows that even \"obvious\" icons go unrecognized or are misread; recognition is subjective and generational.",
      "check": "warning"
    },
    {
      "id": "icon/icon-only-controls",
      "rule": "Never build an icon-only control outside the few whitelisted exceptions, each always with a tooltip and a screen-reader label — in eurodata products interactive icons otherwise always carry a visible text label. [Button](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button)'s `button/text-label` names the exceptions, and [Copy Button](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/copy-button) adds its inline form beside a labeled value.",
      "check": "error"
    },
    {
      "id": "icon/before-label",
      "rule": "Place the icon before its label, matching the Icon + Noun + Verb convention for buttons ([Button](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button)'s `button/label-pattern`).",
      "check": "error"
    },
    {
      "id": "icon/shared-library",
      "rule": "Pick icons from the shared library — the docs provide an icon search by concept — and never mix icons from foreign sets or ad-hoc SVGs into the UI when the library covers the concept. Register a proper custom library for genuine gaps.",
      "why": "One library keeps shapes, weights, and metaphors consistent across the product; stray shapes and weights break its visual voice.",
      "check": "warning"
    },
    {
      "id": "icon/one-concept-one-icon",
      "rule": "Use the same icon for the same concept everywhere — one concept, one icon — and never repurpose an icon with an established meaning for a different concept: a trash can deletes, it does not archive."
    },
    {
      "id": "icon/describe-meaning-only",
      "rule": "Give a standalone, meaning-carrying icon a description for assistive devices, and leave purely decorative icons undescribed so screen readers skip them.",
      "check": "warning"
    },
    {
      "id": "icon/inherit-size",
      "rule": "Let an icon take its size from the surrounding text instead of fixing its own, so icon and label stay visually matched in every state.",
      "check": "error"
    },
    {
      "id": "icon/icon-color",
      "rule": "Give an icon the icon color — `--ed-color-icon` is what the library's own controls set. Wherever the surface sets its own color, such as inside a filled or brand [Button](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button), let the color follow the surrounding text instead.",
      "why": "A decorative icon you slot into a surface such as a [Card](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/card) otherwise picks up body text color, which reads as weak next to the content it is meant to accent; where the surface sets its own color, matching the label is what keeps the pair readable.",
      "check": "error"
    },
    {
      "id": "icon/empty-state-family",
      "rule": "Reserve the empty-state icon family for empty-state illustrations.",
      "why": "It is drawn for large, illustrative use, not for inline symbols.",
      "check": "error"
    },
    {
      "id": "icon/sparingly",
      "rule": "Never scatter icons as decoration across every label and menu item.",
      "why": "When everything is accented, nothing stands out."
    },
    {
      "id": "icon/trusted-sources",
      "rule": "Never load icons from sources you don't fully trust.",
      "why": "A fetched SVG is sanitized before it reaches the page — scripts, event handlers, embedded frames and `foreignObject` are dropped, and every `href` attribute is checked against a scheme allowlist — but it can still pull external resources and carry links, and nothing checks that it draws what you expect.",
      "check": "error"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "name",
        "property": "name",
        "type": "IconName | EmptyStateIconName | undefined",
        "description": "The name of the icon to draw. Typed against the first-party libraries (`IconName` for\nthe default library, `EmptyStateIconName` for `emptyState`). When using a custom\nregistered library, cast the value (e.g. `name=${value as IconName}`).",
        "vocabulary": "icons"
      },
      {
        "name": "family",
        "property": "family",
        "type": "string",
        "description": "The family of icons to choose from. When using empty state icons you can add the mono to get the mono-colored icons."
      },
      {
        "name": "variant",
        "property": "variant",
        "type": "string",
        "description": "The name of the icon's variant. Our Libraries do not use any variants, but it is useful for some custom added libraries."
      },
      {
        "name": "auto-width",
        "property": "autoWidth",
        "type": "boolean",
        "default": "false",
        "description": "Sets the width of the icon to match the cropped SVG viewBox. This operates like the Font `fa-width-auto` class."
      },
      {
        "name": "swap-opacity",
        "property": "swapOpacity",
        "type": "boolean",
        "default": "false",
        "description": "Swaps the opacity of duotone icons."
      },
      {
        "name": "src",
        "property": "src",
        "type": "string | undefined",
        "description": "An external URL of an SVG file. Ignored while `name` is set — a library icon wins, and a resolver that fails\nclears the icon rather than falling back here.\n\nThe response is sanitized before it enters the page. Only vector-graphic elements survive, so `<script>`,\n`<foreignObject>`, embedded frames, `<style>` and the animation setters are dropped with their subtrees; every\n`on*` attribute is removed, and every `href` attribute is checked against a scheme allowlist.\n\nTrust in the source still matters. What survives can still pull external resources — an `<image>`, or a `url()`\nin a `style` attribute or a paint attribute such as `fill`, none of which are inspected — and it can carry links.\nNothing checks that it draws what you expect."
      },
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''",
        "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices."
      },
      {
        "name": "library",
        "property": "library",
        "type": "string",
        "default": "'default'",
        "description": "The name of a registered custom icon library."
      },
      {
        "name": "no-recolor",
        "property": "noRecolor",
        "type": "boolean",
        "default": "false",
        "description": "Disables the recoloring of the icon with currentColor and instead keeps the initial fill color for each path"
      },
      {
        "name": "rotate",
        "property": "rotate",
        "type": "number",
        "default": "0",
        "description": "Sets the rotation degree of the icon"
      },
      {
        "name": "flip",
        "property": "flip",
        "type": "'x' | 'y' | 'both' | undefined",
        "description": "Sets the flip direction of the icon along the 'x' (horizontal), 'y' (vertical), or 'both' axes."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [
      {
        "name": "ed-icon-load",
        "react": "onEdIconLoad",
        "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit."
      },
      {
        "name": "ed-error",
        "react": "onEdError",
        "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit."
      }
    ],
    "slots": [],
    "cssProperties": [],
    "parts": [
      {
        "name": "svg",
        "description": "The internal SVG element."
      },
      {
        "name": "use",
        "description": "The `<use>` element generated when using `spriteSheet: true`"
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/icon/icon.js';",
  "react": {
    "component": "EdIcon",
    "import": "import EdIcon from '@eurodata/eurodata-ui/dist/react/icon/index.js';"
  }
}