[UX] Admin bar: Too much left/right padding introduced with the new Icon API changes

[klonos]

With #364, the admin bar icons have increased size, which is good for UX (larger area to interact with is better on touch-enabled devices), however there is now too much left/right padding as well (1.5em and 1em respectively). That causes the the following:

• icons appear too far from each other visually (this is just aesthetics and subjective opinion)
• increase of mouse "travel time" when moving horizontally across the admin bar
• decrease of the width that causes reaching the breakpoint that switches the admin to mobile version

Some screenshots for visual:

• Before:
  
• Now (1.5em left and 1em right padding):
  
• Proposed (1em and .5em):
  

Perhaps we should decrease the padding even further(?)

[quicksketch]

I sort of like the menu items a little more spread out so that you can tell which icon goes with which menu item. But I would be in favor of reducing the spacing between menu items so that the font size can be increased further without collapsing the extra items.

@klonos Do you have the code ready for a PR?

[quicksketch]

Also looks like #6488 was opened a few days ago. This issue looks like it's a duplicate if you would prefer to work over there.

[klonos]

Thanks for pointing the other issue out. Closing this one here as a duplicate (I've moved what I said here in the issue summary over to the other issue as a comment).