Using "wire:click" on a square icon button breaks alignment

Whenever I add wire:click to a square button with only an icon, it breaks the center alignment of the icon. This is because Flux inserts an empty <span></span> tag inside the button upon rendering. Since this increases the number of elements within the button from 1 to 2, the Tailwind class "gap-2" adds a gap. This effectively shifts the icon to the side.

The behavior is the same whether inside or outside a button group.
This does not seem to happen with any of the other events, such as wire:submit

Balde Markup

<flux:button.group class="mx-auto w-full justify-center">
    <flux:button wire:click="zoomImage({{ $prompt->id }})" size="xs" icon="eye"></flux:button>
    <flux:button size="xs" icon="hand-thumb-up"></flux:button>
    <flux:button size="xs" icon="heart"></flux:button>
    <flux:button size="xs" icon="clipboard" wire:click="copyPromptToClipboard({{ $prompt->id }})"></flux:button>
    <flux:button size="xs" icon="pencil-square"></flux:button>
    <flux:button size="xs" icon="folder-arrow-down" wire:submit="$refresh"></flux:button>
    <flux:button size="xs" icon="trash" variant="danger"></flux:button>
</flux:button.group>

Rendered Markup

<button type="button" class="relative inline-flex items-center font-medium justify-center gap-2 whitespace-nowrap disabled:opacity-75 dark:disabled:opacity-75 disabled:cursor-default disabled:pointer-events-none h-6 text-xs rounded-md w-6  bg-white hover:bg-zinc-50 dark:bg-zinc-700 dark:hover:bg-zinc-600/75 text-zinc-800 dark:text-white border border-zinc-200 hover:border-zinc-200 border-b-zinc-300/80 dark:border-zinc-600 dark:hover:border-zinc-600 shadow-none group-[]/button:-ml-[1px] group-[]/button:first:ml-0 *:transition-opacity [&amp;[data-flux-loading]>:not([data-flux-loading-indicator])]:opacity-0 [&amp;[data-flux-loading]>[data-flux-loading-indicator]]:opacity-100 [&amp;[data-flux-loading]]:pointer-events-none"
data-flux-button="data-flux-button" wire:loading.attr="data-flux-loading" wire:click="zoomImage(18)">
    <svg class="shrink-0 [:where(&amp;)]:size-4" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
        <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
        <path fill-rule="evenodd" d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clip-rule="evenodd"></path>
    </svg>

    <span></span>

    <div class="absolute inset-0 flex items-center justify-center opacity-0" data-flux-loading-indicator="">
        <svg class="shrink-0 [:where(&amp;)]:size-4 animate-spin" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
    </div>
</button>

livewire / flux

Using "wire:click" on a square icon button breaks alignment #247