Button with Icon prop, vs. Button with Icon inside

[Illizian]

I've discovered either an issue, or a requirement 😆...

The following is an example of the problem I am trying to solve/report:

<flux:button size="sm" variant="danger" wire:click="delete()">
    <flux:icon.x-mark wire:loading.remove wire:target="delete" />
    <flux:icon.loading wire:loading wire:target="delete" />
</button>

<flux:button size="sm" variant="danger" icon="x-mark" wire:click="delete()" />

The first <flux:button /> is one in which the icon changes to the loading icon whilst we await a livewire action. The second is just a simple button that will simply send the action.

Unfortunately (for me), they look different:

This is due to the second (hidden) loading icon in the first button - which is quite challenging.

[Illizian]

This is primarily a "challenge" within Livewire itself, but I'd greatly appreciate your input before we close and move to a livewire solution.

[jeffchown]

@Illizian In the flux:button code it looks like it adds the micro variant to the icon by default. Have you tried <flux:icon.x-mark wire:loading.remove wire:target="delete" variant="micro" /> to see if it looks more like a match?