Why is only utility icons allowed on lightning:buttonIcon and other types like standard?

Question

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?

Answer 1

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);
}

Answer 2

You can vote for this idea to request Salesforce.