[MDC Circular Progress] Circular Progress not displayed correctly inside button

[maicol07]

Bug report

Circular progress not displayed correctly

Steps to reproduce

1. Create a button
2. Create a circular progress inside button

Actual behavior

See codepen: https://codepen.io/maicol07/pen/QWNNwxO

Expected behavior

Circular Progress displayed correctly

Your Environment:

Software	Version(s)
MDC Web	7.0.0
Browser	Firefox
Operating System	Windows 10

[joyzhong]

Thanks for reporting this issue! Can you clarify your use case for using a circular progress indicator inside of a button?

[maicol07]

@joyzhong sure.
I'm using a circular progress isnide a button to show a loading button. When a user clicks on it, an AJAX request is sent to the server. Meanwhile, the button is loading

[joyzhong]

Got it! This pattern is demonstrated in the MD spec: "A circular indicator can be integrated into a button or actionable icon to express a connection between an interaction and a specific item. They are typically used to express when an interaction, such as clicking a button again, isn’t available."

Adding to our backlog.

+cc @allan-chen