Avoid padding loading icon on button when no text

[lukedukeus]

🐛 Bug Report

The loading spinner is automatically given some padding/margin on the left hand side when loading

💻 Repro or Code Sample

<FluentButton IconEnd="@(new Icons.Regular.Size16.ArrowClockwise())" Title="Refresh" Loading="@refreshing" OnClick="@Refresh" Appearance="Appearance.Outline" />

@code {
    private bool refreshing = false;

    private async Task Refresh()
    {
        refreshing = true;

        await Task.Delay(1000);

        refreshing = false;
    }
}

🤔 Expected Behavior

There should only be padding if there is text. The spinner should remain centered within the button.

😯 Current Behavior

💁 Possible Solution

from https://github.com/microsoft/fluentui-blazor/blob/dev/src/Core/Components/Button/FluentButton.razor, it looks like RingStyle doesn't apply if a starting icon is specified, maybe it needs to apply regaurdless, or maybe modify RingStyle to look at the buttons content? (I have no clue, just making a guess)

In https://github.com/microsoft/fluentui-blazor/blob/dev/src/Core/Components/Button/FluentButton.razor.cs

    private string RingStyle(Icon icon)
    {
        var size = icon.Width;
        var inverse = Appearance == AspNetCore.Components.Appearance.Accent ? " filter: invert(1);" : string.Empty;
        var paddingLeft = string.IsNullOrEmpty(ChildContent) ? 0 : -5

        return $"width: {size}px; height: {size}px;padding-left:{paddingLeft };{inverse}";
    }

[lukedukeus]

workaround:

<FluentButton Title="Refresh" OnClick="@Refresh" Appearance="Appearance.Outline" Disabled="@refreshing">
    @if (refreshing)
    {
        <FluentProgressRing Width="12px"/>
    }
    else
    {
    <FluentIcon Value="@(new Icons.Regular.Size16.ArrowClockwise())" />
    }
</FluentButton>

[Vincent Baaij]

Will be fixed in the component with next release. See PR mentioned above.