Animate custom refresh lightning-button-icon LWC

Question

I want animate a lightning-button-icon as the standard Salesforce refresh button in LWC. I've already seen a related question but the answer was not conclusive, at this point I don't know if it's possible.

<lightning-button-icon  icon-name="utility:refresh" alternative-text="Refresh" class="slds-p-around_xx-small" onclick={refreshTable}></lightning-button-icon>

I've tried using the icon-class atribute but according to the documentation "Only Lightning Design System utility classes are currently supported with icon-class."

I was able to do it in the dev console by adding a breakpoint in refreshTable and edit a class I've created before,

.refreshRotate { animation: rotate .4s linear infinite; }

add " svg". This because if I create the class as "refreshRotate svg {" it doesn't affect the svg. I was then able to toggle it with

e.target.classList.toggle("refreshRotate");

I can't Access the DOM in JS either, other than query selector but since the svg it's not in the same namespace i can't access it.

Any suggestions?

Answer 1

I was able to do it using the markup of lightning-button-icon. I guess locker service is preventing me to access the svg inside this component so declare it as this.

LWC Markup

<button class="slds-button slds-button_icon slds-button_icon-border" title="Refresh" alternative-text="Refresh" onclick={refreshTimeline}>
    <svg class="slds-button__icon" aria-hidden="true">
        <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.28.0#refresh"></use>
    </svg>
</button>

LWC Controller

const buttonIcon = evt.target.querySelector('.slds-button__icon');
buttonIcon.classList.add('refreshRotate');
return refreshApex(this.wiredActivities)
    .then(() => {
        buttonIcon.classList.remove('refreshRotate');
    });

LWC CSS (rotate is an animation already created for lwc)

.refreshRotate {
    animation: rotate .4s;
}