lightning:dynamicIcon

Represents various animated icons with different states. This component requires API version 41.0 and later.

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.

Attributes

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&#x2019;s happening. For example, 'Graph is refreshing', not what the icon looks like, 'Graph'.
onclick Action The action triggered when the icon is clicked.