Button: No margin/padding between button text and loading spinner

[ewenjo]

Describe the bug

Buttons without an icon have no margin between the loading spinner and the button text. Although, I'm not entirely sure if this is a bug or intended behavior.

Reproducer

https://codesandbox.io/s/primereact-demo-forked-u2xxwe?file=/src/App.js

PrimeReact version

9.3.1

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Create a button without setting an icon, set the loading state.

Expected behavior

I would expect there to be some padding, similar to the padding there is when a button has an icon.

[melloware]

The issue is the theme is doing this on purpose for some reason:

.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin: 0;
}

Workaround is to add this CSS.

.p-button.p-button-loading-label-only .p-button-loading-icon.p-button-icon-left {
  margin-right: 0.5rem;
}

[melloware]

OK I submitted a theme fix.

[melloware]

Nice fix @ulasturann !