On this page

Icon

See the Icons section for more information, including a list of all available icons.

Demos

Simple icon

Label

Using icons in buttons

Icons can be used inside other components, like buttons. For demos of how to use icons inside buttons, see the Button documentation.

Usage

Props

Prop name	Description	Type	Default
`icon`^(required)	The SVG path or an object containing that path plus other data.	`Icon`
`iconLabel`	Accessible label for the icon. If not included, the icon will be hidden from screen readers via `aria-hidden="true"`. Browsers also display this label as a tooltip when the user hovers over the icon. Note that this label is not rendered as visible text next to the icon.	`string`	`''`
`lang`	Explicitly set the language code to use for the icon. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang. Defaults to the lang attribute of the nearest ancestor at mount time.	`string \| null`	`null`
`dir`	Explicitly set the direction to use for the icon. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir. Defaults to the computed direction at mount time.	`HTMLDirection\|null`	`null`

Events

Event name	Properties	Description
`click`