This Lightning Design System Button Icons example produces an "inverse" icon - a white icon on a dark blue background - that in Lightning Experience appears to be used to indicate a selected button:

<button class="slds-button slds-button--icon-inverse" title="settings">
  <svg class="slds-button__icon" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
  <span class="slds-assistive-text">Settings</span>

How can this styling be achieved using (that produces lightning:buttonIcon?

1 Answer 1


While lightning:buttonIcon allows variant="border-inverse", the approach that both inverts the icons color and sets the background color is to add the slds-is-selected class:

<div class="slds-button-group" role="group">
    <lightning:buttonIcon class="{! v.compact ? 'slds-is-selected' : ''}" variant="border" .../>
    <lightning:buttonIcon class="{! !v.compact ? 'slds-is-selected' : ''}" variant="border" .../>

Here v.compact is a boolean component attribute that these buttons toggle.

(Figured out this answer as I was writing the question but took many tries so thought would go on and post.)

You must log in to answer this question.

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