Button phx-disable-with not rendering icon after state | Elixir Language | Page 1

Hi everyone, I am having trouble when submitting with button that has text and an icon it is returning to state with only text without icon after phx-disable-with.

I need your help to point me in the right direction.

Thank you in advance

# RENDERED BUTTON
              <.button class="md:py-3 md:px-6 group" phx-disable-with={gettext("Joining...")}>
                {gettext("Join us")}

                <.icon name="hero-bell-alert-micro group-hover:animate-wiggle" />
              </.button>

 # BUTTON COMPONENT
  attr :type, :string, default: nil
  attr :class, :string, default: nil
  attr :rest, :global, include: ~w(disabled form name value)

  slot :inner_block, required: true

  def button(assigns) do
    ~H"""
    <button
      type={@type}
      class={[
        "phx-submit-loading:opacity-75 rounded-lg bg-primary hover:bg-primary/90 py-2 px-3",
        "text-sm font-bold leading-6 text-primary-foreground active:text-primary-foreground/80",
        "border border-primary hover:border-primary/90",
        @class
      ]}
      {@rest}
    >
      {render_slot(@inner_block)}
    </button>
    """
  end
# ICON COMPONENT
  attr :name, :string, required: true
  attr :class, :string, default: nil

  def icon(%{name: "hero-" <> _} = assigns) do
    ~H"""
    <span class={[@name, @class]} />
    """
  end

#Button phx-disable-with not rendering icon after state