The basic idea around “master symbols” like this button is that you’re effectively stacking all of the potential component states into a single symbol, then turning the nested symbols inside of it on or off depending on the state that you’re trying to show off.

The icon symbol layer in our master button symbol is the “placeholder” that represents our button loading state (see above).

Frankly, there’s not much to this layer. I just have an icon symbol with that little loading shape, then I floated it in the center of the button. Not sure what “floating” means? Read this brilliant article by Peter Nowell. He doesn’t know this, but he taught me everything I know:

Watch how easy it is:

With all of your reclaimed design time, I recommend starting a side hustle like UX Power Tools.

If your mouth is agape wondering how I have the option to change my icon color, check out this fantastic article by Francesco Bertocci:

I ruthlessly stole the technique right out of his fingers. Thanks, man!