On the button with an icon that has more visual weight, equal padding on both sides works. This is because the keyboard shortcut indicator has almost similar visual weight as the icon.
Thread
Two similar buttons. Same contents on both buttons. Only the icon is different. How do you develop a button that respects visual weight of its children and therefore creates visual balance with just the right amount of padding?
On the button with an icon with lighter visual weight, the opposite side to the icon needs more padding to balance out. This is because the icon side visually feels like it has more padding due of its lighter visual weight.
Imagine if CSS allowed a property to center elements based on their visual weight. justify-content: visual-weight;
