Icons in buttons

[revenz]

I'm wanting to add a spinner icon to a button. I can add the spinner icon via content css, but since I cannot wrap that icon, browsers will only let me spin/transform the parent element and not the content.

So I can only spin the entire button and not the content Ive added. For example, i added button class "btn-spinner" and this is the CSS .btn-spinner:before { content: "\f110"; font-family: "Font Awesome 5 Free"; padding-right:5px; font-style: normal; font-size: 0.9rem !important; font-weight: 900; animation: fa-spin 2s infinite linear; }

The animation doesnt work at this level.

if i change it to .btn-spinner { animation: fa-spin 2s infinite linear; } .btn-spinner:before { content: "\f110"; font-family: "Font Awesome 5 Free"; padding-right:5px; font-style: normal; font-size: 0.9rem !important; font-weight: 900; } The animation works, but the entire button spins.

Could an icon property be exposed, which adds a element with whatever class you pass in? Or could you expose the actual button element so this could be manipulated if needed?

I'm wanting to keep the original npm of this and no have to hack, but my only option right now is to download a copy and use a modified version (which means updates become a nightmare).

I think this would be beneficial to others