Which inner html element in lightning component to apply custom CSS

Question

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;
 }

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.

Answer 1

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;
}