The Icon component is a handy tool for controlling size, and flipping right-to-left for international use. Icons are utilized from Calcite's UI Icon library that contains hundreds of unique concepts.
Overview
Icons can be actionable or illustrative graphical representations of intent. For instance they can be used for wayfinding throughout the interface or represent interactive elements - on their own or in combination with text content. Meaningful and consistent use of icons throughout the interface can help the user easily navigate through workflows.
Use icons sparingly to ensure their meaning is conveyed - overloading the interface with graphical elements can be distracting and reduce the significance of those used.
Usage
- Use in Buttons, FABs, or Links when accurately supporting the component's action
- Use in Dropdowns, Comboboxes, Accordions, etc. when it helps with clear decision making
- Anchor to an edge or corner of a view as a supportive action
Sample
Accessibility
It is recommended to set the text value if your icon is semantic to provide context to more users, in particular users of assistive technologies.
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| flipRtl | flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | false |
| icon | icon | Displays a specific icon. | string | |
| preload | preload | When true, it loads preloads the icon data. | boolean | false |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
| textLabel | text-label | Accessible name for the component. It is recommended to set this value if your icon is semantic. | string |
Styles
| Name | Description |
|---|---|
| --calcite-ui-icon-color | --calcite-icon-color. Specifies the component's color. Defaults to current color. |
| --calcite-icon-color | Specifies the component's color. Defaults to current color. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |