Icon
import { Icon } from '@enmovil/ui-design-system';
Renders an icon by name, with an optional colour, size, spin and rotation. An unknown name logs a warning and renders nothing.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
name | string | Yes | — | One of 836 predefined values | Name of the icon to show, such as BankFilled or SmileTwoTone. An unknown name logs a warning and renders nothing. |
twoToneColor | string | No | — | — | Main colour of a two-tone icon. Only applied when name ends in TwoTone. |
color | string | No | — | — | CSS colour of the icon. Without it the icon uses the surrounding text colour. |
size | number | No | — | — | Size of the icon in pixels, set as its font size. Without it the icon follows the surrounding font size. |
spin | boolean | No | — | — | Rotates the icon continuously. |
rotate | number | No | — | — | Rotates the icon by the given number of degrees. |
Other attributes
Icon passes 373 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onClick | MouseEventHandler<HTMLSpanElement> | Fires when the icon is clicked. For a clickable icon with a focus ring and keyboard support, prefer an icon-only Button. |
onMouseEnter | MouseEventHandler<HTMLSpanElement> | Fires when the pointer enters the icon. |
onMouseLeave | MouseEventHandler<HTMLSpanElement> | Fires when the pointer leaves the icon. |
Children
Icon does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Simple Icon example.
Loading playground…
Storybook
Open Icon in Storybook to try every story with the full set of controls.