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.

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;
}
  • $A.util.addClass(square,'slds-button_destructive'); any idea why when I do this it moves the icon slightly to the right ? Thanks! – SallyRothroat Feb 2 '18 at 19:46
  • @madmax no idea. It should be centered. – sfdcfox Feb 2 '18 at 19:54

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.