fix(#1019): modify buttons icons padding

[MewenLeHo]

Closes #1019

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Icons in buttons icons should be 1px lower.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

[louismaximepiton]

Sounds not good to me.

[louismaximepiton]

It looks like something's wrong with that : Icons are 1px too low, on discuss.

[MewenLeHo]

It looks like something's wrong with that : Icons are 1px too low, on discuss.

One possible way:

• keep the modification (padding-top and bottom are equals thanks to it)
• remove the .btn > svg {translate(1px)} rule NO or else text and icons in buttons with icons component will be centered (and they should not ben centered according to design guidelines)
• change ".btn > svg {translate(1px)}" to ".btn:not(.btn-icon) > svg {translate(1px)}"

[julien-deramond]

It doesn't work with Firefox 95.0.1 (64-bit) under Ubuntu. The icon is not centered.

But I don't understand the issue. In the issue the icon seems to be centered in the screenshot. It is not because we have 7px / 9px in the inspector that it is the reality. transform: translateY(1px) is not reflected in those values.

[julien-deramond]

Checked it and it works with the latest versions of:

• Ubuntu
  • Chrome
  • Firefox
• macOS
  • Chrome
  • Firefox
  • Safari

If you've tested it with Browserstack as well, I think we can merge it.