[Question] Icon contained in button causes FOUC

[lonix1]

Seeking guidance regarding button styling.

This is a common use case:

<button class="btn btn-primary"><i class="bi bi-house"></i></button>

On page load, there's a FOUC (Flash of Unstyled Content) where the button is narrow, and widens only after the icon font is loaded.

The solution is to set some min-width on the button. But what value to use? I tried 1rem but that doesn't do the trick. I can use 24px but I don't want to hardcode the value as it won't be responsive. What is the correct approach?

(PS: It would be useful if the docs highlighted this obvious use case.)