fix(Button): adjust button icon in small, medium size (#15585)

packages/react/src/components/Button/Button.stories.js

@@ -7,10 +7,11 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Add } from '@carbon/icons-react';
+import { Add, FitToScreen } from '@carbon/icons-react';
 import { default as Button, ButtonSkeleton } from '../Button';
 import ButtonSet from '../ButtonSet';
 import mdx from './Button.mdx';
+import './button-story.scss';
 
 export default {
   title: 'Components/Button',
@@ -62,6 +63,23 @@ export const Default = (args) => {
   return <Button {...args}>Button</Button>;
 };
 
+export const ButtonTest = () => {
+  const sizes = ['sm', 'md', 'lg', 'xl'];
+  return (
+    <div>
+      {sizes.map((size) => (
+        <div key={size} className="container">
+          <Button size={size} renderIcon={FitToScreen}>
+            <span>label</span>
+          </Button>
+          <div className={`ruler top ${size}`} />
+          <div className={`ruler bottom ${size}`} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
 export const Secondary = (args) => {
   return (
     <Button kind="secondary" {...args}>

packages/react/src/components/Button/button-story.scss

@@ -0,0 +1,56 @@
+.container {
+  margin: 1rem;
+  position: relative;
+
+  button > span {
+    background-color: rebeccapurple;
+  }
+
+  button > svg {
+    background-color: rebeccapurple;
+  }
+
+  .ruler {
+    height: 1px;
+    width: 100%;
+    position: absolute;
+    border-top: 1px dotted black;
+    box-sizing: border-box;
+
+    &.top {
+      &.sm {
+        top: 6px;
+      }
+
+      &.md {
+        top: 10px;
+      }
+
+      &.lg {
+        top: 14px;
+      }
+
+      &.xl {
+        top: 14px;
+      }
+    }
+
+    &.bottom {
+      &.sm {
+        top: 25px;
+      }
+
+      &.md {
+        top: 29px;
+      }
+
+      &.lg {
+        top: 33px;
+      }
+
+      &.xl {
+        top: 33px;
+      }
+    }
+  }
+}

packages/styles/scss/components/button/_button.scss

@@ -176,6 +176,12 @@
     }
   }
 
+  // Adjust icon positioning in small, medium variants only
+  .#{$prefix}--btn--sm:not(.#{$prefix}--btn--icon-only) .#{$prefix}--btn__icon,
+  .#{$prefix}--btn--md:not(.#{$prefix}--btn--icon-only) .#{$prefix}--btn__icon {
+    margin-block-start: 0;
+  }
+
   .#{$prefix}--btn--icon-only.#{$prefix}--btn--selected {
     background: $background-selected;
   }