3

I am trying to customize a <lightning:buttonIcon /> but I have a little success with the slds. I want to use a custom style sheet but I am not sure excactly how the css selectors apply to the lightning component. I successfully changed the size of the icon by doing this:

.THIS.bigIcon svg {
width: 3rem;
height: 3rem;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
}

I want to make the button bigger to cover the now bigger Icon, however the same principal doesn't seem to work by doing this:

.THIS.bigButton button {
width: 10rem;
height: 10rem;
 }

enter image description here

On the slds site they give markup that I guess represents that component this is why I chose to select button in the lightning css.

1 Answer 1

3

The button itself is actually the class that gets set. There's no need to specify "button" afterwards:

.THIS.bigButton {
width: 10rem;
height: 10rem;
}

I actually wrote a demo alternative that works:

<lightning:buttonIcon class="ss-icon" alternativeText="test" name="test" size="large" iconName="utility:close" />

.THIS.ss-icon {
    width: 3rem;
    height: 3rem;
}

.THIS.ss-icon svg {
    width: 2rem;
    height: 2rem;
}
2
  • $A.util.addClass(square,'slds-button_destructive'); any idea why when I do this it moves the icon slightly to the right ? Thanks!
    – MadMax
    Feb 2, 2018 at 19:46
  • @madmax no idea. It should be centered.
    – sfdcfox
    Feb 2, 2018 at 19:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .