lightning:dynamicIcons In Lightning Component

Snehil Jaiswal

7 years ago

In this blog we are going to learn about lightning:dynamicIcons in lightning component. This tag represents animated icons and can be use to represent the current process which is running in background. These are of following type :

Ellie
Eq
Score
Strength
Trend
Waffle

We can use this component in API version 41.0 or above. Let’s learn about its attribute.

Attributes

It has following attributes :
1). type: LDS name of dynamic icons. It is required attribute.
2). option : To change the appearance of dynamic icons.
3). class : To style the icon
4). title : Display tooltip
5). alternativeText : used to describe the icon.
6). onclick : action triggered when icon is clicked

Example

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
 <!--
 /**
 * Webkul Software.
 *
 * @category Webkul
 * @author Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
 -->
 <div>
 <div>
 <lightning:dynamicIcon type="ellie"/>
 </div>
 <div>
 <div><lightning:dynamicIcon type="eq" option="stop"/></div>
 <div><lightning:dynamicIcon type="eq" option="play"/></div>
 </div>
 <div>
 <div><lightning:dynamicIcon type="score" option="positive"/></div>
 <div><lightning:dynamicIcon type="score" option="negative"/></div>
 </div>
 <div>
 <div><lightning:dynamicIcon type="strength" option="-1"/></div>
 <div><lightning:dynamicIcon type="strength" option="-2"/></div>
 <div><lightning:dynamicIcon type="strength" option="-3"/></div>
 <div><lightning:dynamicIcon type="strength" option="1"/></div>
 <div><lightning:dynamicIcon type="strength" option="2"/></div>
 <div><lightning:dynamicIcon type="strength" option="3"/></div>
 </div>
 <div>
 <div><lightning:dynamicIcon type="trend" option="up"/></div>
 <div><lightning:dynamicIcon type="trend" option="down"/></div>
 <div><lightning:dynamicIcon type="trend" option="neutral"/></div>
 </div>
 <div>
 <lightning:dynamicIcon type="waffle" />
 </div> 
 </div>
</aura:component>

Output

Support

That’s all for lightning:dynamicIcons in lightning component , still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to contact us, we will be happy to help you https://wedgecommerce.com/contact-us/.