[SalesForce] make buttonIcon icons bigger

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 ?

Best Answer

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!

Related Topic