make buttonIcon icons bigger

Question

How can I change the size of an icon inside of a lightning:buttonIcon ?

<div class="slds-grid slds-grid--vertical">       
        <div class="slds-col">
            <lightning:buttonIcon class="slds-size_medium" size="large" iconName="utility:fallback" alternativeText="nah"/>
     </div>
</div>

I am confused on how to properly style this. When the buttonIcon is inside a grid it doesn't seem to, rely on its own size attribute but by the size the grid assigns it. right ?

Answer 1

I don't think there is a standard solution for this.

You can do a little css hack:

define a unique class on you icon:

<lightning:buttonIcon iconName="utility:fallback" class="myUniqueClass" />

now add a css rule for the svg element that is inside your unique class:

.THIS .myUniqueClass svg {
    width: 3rem;
    height: 3rem;
}

I think that size 2rem is the default large icon, so play with the size yourself.

Be aware that any svg tag that will be inside an element with the myUniqueClass class will use that css rule!

Answer 2

change the class of the button icon

<lightning:buttonIcon iconClass="slds-size_large"... />