Icon passed into rounded button distorts the button by adding extra space beneath icon

Expected Behavior

When trying to create a round button, I expect that the icon would be spaced in the center of the button.

Actual Behavior

The button becomes oblong and the icon has space beneath it.

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/30ol4r18vp

Steps to Reproduce

Create a button inside of a round box with an icon:

<Box round="full" background="light-3">
  <Button icon={<Add />} onClick={() => ""} />
</Box>

Your Environment

• Grommet version: 2.3.1
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): Either

[atanasster]

Some PRs ago it seems the icon display css changed to inline-block and that started causing the added spacing at the bottom of icons. It comes in the way in many use cases,

Here is what I am now using:

export default styled(Button)`
  border-radius: 50%;
  &>svg {
    display: block;
  }
`;

https://github.com/atanasster/grommet-controls/blob/master/src/js/components/IconButton/StyledIconButton.js

[atanasster]

The inline-block is on the svg - I might be wrongly recollecting on the exact way it started hapenning, but i am sure it was working ok up to a certain point and then suddenly all buttons with icons became off-center and i started using my fix.