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"/>

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 ?


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!

  • looks good. lightning:buttonIcon has a 'iconClass' attribute. Does that do kinda the same thing ? – SallyRothroat Jan 25 '18 at 14:03
  • I am not really sure, you should try it – Itai Shmida Jan 25 '18 at 14:13

change the class of the button icon

<lightning:buttonIcon iconClass="slds-size_large"... />
  • unfortunately that doesn't make the actual icon bigger – SallyRothroat Jan 24 '18 at 20:14

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.