function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Aman wadhwa 18Aman wadhwa 18 

Use custom icon in lightning button

Hi everyone,
i have a little query about lightning button icon as of my reserch now we can only use "utility:icon" inside lightning button but is it possible to use a custom icon for lightning button and if yes can anyone help me how to do it.
Thanks in advance
Maharajan CMaharajan C
Hi Aman,

In  <lightning:button /> you can use the any type of icons:
<lightning:button label="Download" iconName="custom:custom17" />
 
But if you are trying the same in  <lightning:buttonIcon/> it will throw error. It's a limitation in lightning:buttonIcon. 
In the lightning Document they clearly mentioned it will only support Utility Type icons. - https://developer.salesforce.com/docs/component-library/bundle/lightning:buttonIcon/specification. 
It's still in the idea :  https://trailblazer.salesforce.com/ideaView?id=0873A000000LnirQAC

As an alternate you can use the custom html button with <lightning:icon/>: 
https://salesforce.stackexchange.com/questions/202917/why-is-only-utility-icons-allowed-on-lightningbuttonicon-and-other-types-like-s 
<button name="lead" class="slds-button">
    <span data-value="{!value}" onclick="{!c.controllerFunction}">
          <lightning:icon iconName="standard:lead" size="small"/>
    </span>
</button>
  
controllerFunction: function(component,event,helper) {

   var value = event.currentTarget.getAttribute("data-value");
   console.log('value:::',value);
}


Thanks,
Maharajan.C
​​​​​​
CharuDuttCharuDutt
Hii Aman
You Can Select Any Icon You Want From The Below link Category Wise
Lightning Icons (https://lightningdesignsystem.com/icons/) 
<lightning:button label="Download"  iconName="action:approval" />
    <lightning:button label="Download" iconName="doctype:audio" />
    <lightning:button label="Download" iconName="standard:event" />
    <lightning:button label="Download" iconName="utility:image" />
    <lightning:button label="Download" iconName="custom:custom88" />
    <lightning:button label="Download" iconName="utility:payment_gateway" />
    <lightning:button label="Download" iconName="custom:custom7" />
Please Mark It As Best Answer If It Helps
Thank You!