Icon
Installation
Usage
Loading
Icons load lazily by default, meaning that the browser will not attempt to fetch and render the icon until it scrolls into view. You can change this with the loading attribute, which has three values:
lazy(the default): load icons when they scroll into viewidle: load each icon on the page as soon as the browser enters an idle state Or, on less-capable browsers, at the next frameeager: each icon will begin to load and render the moment it connects to the DOM.
You might choose to enable eager rendering for "above-the-fold" content, but keep lazy loading for the rest of the page.
rh-icon
| Slot Name | Description |
|---|---|
|
Slotted content is used as a fallback in case the icon doesn't load |
| DOM Property | Description | Type | Default |
|---|---|---|---|
set |
Icon set |
|
|
icon |
Icon name |
|
|
accessibleLabel |
Defines a string value that labels the icon element. Adds role="img" to element. |
|
|
loading |
Controls how eager the element will be to load the icon data
|
|
|
None
| Event Name | Description |
|---|---|
load |
Fired when an icon is loaded and rendered |
set |
|
error |
Fired when an icon fails to load |
| Part Name | Description |
|---|---|
fallback |
Container for the fallback (i.e. slotted) content |
| CSS Property | Description | Default |
|---|---|---|
--rh-icon-size |
Override default icon size |
—
|
None
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
