lightning:dynamicIcon

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.

1<aura:component>
2    <lightning:dynamicIcon type="ellie" alternativeText="Your calculation is running."/>
3</aura:component>

Usage Considerations

The following options are available.

• Use the type="ellie" attribute to show a pulsing blue circle, which pulses and stops after one animation cycle. This icon is great for field calculations or a process that’s running in the background.
• Use the type="eq" attribute to show an animated graph with three bars that rise and fall randomly. This icon is great for a graph that’s refreshing.
• Use the type="score" attribute to show a green filled circle or a red unfilled circle. This icon is great for showing positive and negative indicators.
• Use the type="strength" attribute to show three animated horizontal circles that are colored green or red. This icon is great for Einstein calculations or indicating password strengths.
• Use the type="trend" attribute to show animated arrows that point up, down, or straight. This icon is great for showing movement of a value from one range to another, like a forecast score.
• Use the type="waffle" attribute to show a square made up of a 3x3 grid of circles. This icon animates on hover. This icon is great for app-related items, like the App Launcher in Lightning Experience.

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