eds-icon-wrapper

See It in Use with Code

Check out this practical implementation of component.

Directly in HTML

In React

Properties

Property	Attribute	Description	Type	Default
`label`	`label`	Accessible label for the icon. Set this when the icon conveys meaning on its own (e.g. a standalone status/action icon) — it is exposed as `role="img"` + `aria-label`. When omitted, the icon is treated as decorative and hidden from assistive technology (`aria-hidden`), which is correct when it sits next to a text label that already describes it.	`string`	`undefined`
`name` (required)	`name`		"copy" \| "arrow-right" \| "chevron-right" \| "chevron-left" \| "chevron-down" \| "chevron-up" \| "arrow-left" \| "arrow-up-right" \| "close" \| "add" \| "edit" \| "checkmark" \| "download" \| "upload" \| "view" \| "exit" \| "caretSort" \| "bookmark" \| "createLink" \| "activity" \| "account" \| "analytics" \| "template" \| "documentExport" \| "documentDownload" \| "trashCan" \| "chooseItem" \| "copyLink" \| "dragHorizontal" \| "dragVertical" \| "login" \| "logout" \| "move" \| "replicate" \| "sortAscending" \| "sortDescending" \| "requestQuote" \| "reset" \| "resultDraft" \| "share" \| "play" \| "book" \| "chatOff" \| "forum" \| "shareKnowledge" \| "time" \| "help" \| "customerService" \| "code" \| "rocket" \| "compass" \| "menu" \| "search" \| "settings" \| "notification" \| "user" \| "group" \| "save" \| "document" \| "folder" \| "image" \| "calendar" \| "information" \| "warning" \| "error" \| "checkmark-filled" \| "star" \| "thumbs-up" \| "thumbs-down" \| "twitter" \| "linkedin" \| "facebook" \| "youtube" \| "mastodon" \| "bluesky"	`undefined`
`size`	`size`		`16 \| 20 \| 24 \| 32`	`20`

Dependencies

Used by

Graph

graph TD;
  eds-accordion --> eds-icon-wrapper
  eds-alert --> eds-icon-wrapper
  eds-breadcrumb --> eds-icon-wrapper
  eds-button --> eds-icon-wrapper
  eds-card-feature --> eds-icon-wrapper
  eds-card-generic --> eds-icon-wrapper
  eds-code-block --> eds-icon-wrapper
  eds-global-search --> eds-icon-wrapper
  eds-input --> eds-icon-wrapper
  eds-input-footer --> eds-icon-wrapper
  eds-input-search --> eds-icon-wrapper
  eds-input-select --> eds-icon-wrapper
  eds-link --> eds-icon-wrapper
  eds-search-select --> eds-icon-wrapper
  eds-sidebar --> eds-icon-wrapper
  eds-steps-v2 --> eds-icon-wrapper
  eds-table --> eds-icon-wrapper
  style eds-icon-wrapper fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS