A lightning:dynamicIcon component visually displays an event that's in progress, such as a graph that's loading.
This component inherits styling from dynamic icons in the Lightning Design System.
Here’s an example of an ellie icon with alternative text.
<aura:component> <lightning:dynamicIcon type="ellie" alternativeText="Your calculation is running."/> </aura:component>
Usage Considerations
The following options are available.
Accessibility
Optionally, you can use the alternativeText attribute to describe the dynamicIcon.
Sometimes a dynamicIcon is decorative and doesn’t need a description. However, on smaller screens and windows the dynamicIcon can also be informational. In this case, include alternativeText. If you don’t include alternativeText, check smaller screens and windows to ensure that the dynamicIcon is only decorative on all formats.
Attribute Name | Attribute type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
type | String | The Lightning Design System name of the dynamicIcon. Valid values are: ellie, eq, score, strength, trend, and waffle. | Yes |
option | String | The option attribute changes the appearance of the dynamicIcon. The options available depend on the type attribute. For eq: play (default) or stop For score: positive (default) or negative For strength: -3, -2, -1, 0 (default), 1, 2, 3 For trend: neutral (default), up, or down | |
alternativeText | String | The alternative text used to describe the dynamicIcon. This text should describe what’s happening. For example, 'Graph is refreshing', not what the icon looks like, 'Graph'. | |
onclick | Action | The action triggered when the icon is clicked. |