1

I want to use a standard icon as button in my application but it is not allowed in lightning:buttonIcon.

If I use lightning:icon, it does not contain onclick handlers.

If I enclose it in div or any other html tag, I can't use event.getSource()/event.taget/event.currentTarget or any other event handler methods to get attribute value (like 'v.value') from that element because of locker service restrictions.

  1. Why are other types not allowed in lightning:buttonIcon?

  2. How to use standard icons in lightning:buttonIcon?

  • When we try to use Standard Icon, it gives an error as: lightning component 'buttonIcon' only support "utility" icons which answers your first question. Second question doesn't seems to be possible with lightning at the moment. – Raul Dec 27 '17 at 12:49
  • what is your use case? – Himanshu Dec 27 '17 at 12:57
  • @RahulSharma : I know it gives error and standard icons are not allowed. My question is why has salesforce have done that? It would be easier to use other icons as buttons had this restriction not been there. – Sarang Dec 28 '17 at 5:19
3

As Rahul said, lightning:buttonIcon supports utility:icons only. If you want to use Standard or Action icons then you can do as below.

Cmp:

<button name="lead" class="slds-button">
    <span data-value="{!value}" onclick="{!c.controllerFunction}">
          <lightning:icon iconName="standard:lead" size="small"/>
    </span>
</button>

And you can get data-value like this. Controller:

controllerFunction: function(component,event,helper) {

   var value = event.currentTarget.getAttribute("data-value");
   console.log('value:::',value);
}
| improve this answer | |
1

You can vote for this idea to request Salesforce.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.