How to get the "inverse" style using a lightning:buttonIcon?

Question

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>
  </svg>
  <span class="slds-assistive-text">Settings</span>
</button>

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

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

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.)