Svg inside button height changes with alignItems: "center"

Question

Why is that with alignItems: "center" button with svg changes its height and how to fix it?

Font size is user defined, so no fixed height solutions please.

Button with svg in first line position 1 is smaller.

Sandbox.

import * as React from "react";
import styled from "styled-components";

const ArrowIcon = React.forwardRef(({ ...rest }, ref) => (
  <StyledIcon xmlns="http://www.w3.org/2000/svg" {...rest} viewBox="0 0 16 16">
    <path d="M15.375,7L10,2.54C9.695,2.287,9.461,2,9,2C8.375,2,8,2.516,8,3v3H1C0.45,6,0,6.45,0,7v2c0,0.55,0.45,1,1,1h7v3  c0,0.484,0.375,1,1,1c0.461,0,0.695-0.287,1-0.54L15.375,9C15.758,8.688,16,8.445,16,8S15.758,7.313,15.375,7z" />
  </StyledIcon>
));

export default function App() {
  return (
    <>
      <div
        style={{
          display: "flex",
          alignItems: "center"
        }}
      >
        <Button>
          <ArrowIcon />
        </Button>
        <Button>Aa</Button>
        <Input />
      </div>
      <div
        style={{
          display: "flex"
        }}
      >
        <Button>
          <ArrowIcon />
        </Button>
        <Button>Aa</Button>
        <Input />
      </div>
    </>
  );
}

export const StyledIcon = styled.svg<{ inverted?: boolean }>`
  height: 1rem;
  fill: ${({ theme, inverted }): string =>
    inverted ? theme.secondaryColor : theme.primaryColor};
`;

const Button = styled.button`
  box-sizing: content-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font: inherit;
  box-shadow: inset 0 0 0 1px blue;
  margin: 5px;
  padding: 5px 10px;
  border: 0;
  border-radius: 3px;
  transition: all 0.2s ease-out;
  user-select: none;
  outline: none;
`;
const Input = styled.input`
  box-sizing: content-box;
  margin: 5px;
  padding: 5px 0;
`;

Answer 1

Since you use padding, the button is sized according to the svg size. To prevent this, we can define svg as position: absolute. So it doesn't matter what svg size is.

.button {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* -webkit-box-pack: center; */
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* -webkit-align-items: center; */
  /* -webkit-box-align: center; */
  -ms-flex-align: center;
  /* align-items: center; */
  font: inherit;
  box-shadow: inset 0 0 0 1px blue;
  margin: 5px;
  padding: 5px 10px;
  border: 0;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  
  /* added */
  position:relative;
  overflow:hidden;
  min-width:20px;
}

.svg {
  height: 1rem; /* no longer what the size is will not affect the button size. .5rem or 2rem it does not matter */
  
  /* added */
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

<div style="display: flex;">
  <button class="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="svg"><path d="M15.375,7L10,2.54C9.695,2.287,9.461,2,9,2C8.375,2,8,2.516,8,3v3H1C0.45,6,0,6.45,0,7v2c0,0.55,0.45,1,1,1h7v3  c0,0.484,0.375,1,1,1c0.461,0,0.695-0.287,1-0.54L15.375,9C15.758,8.688,16,8.445,16,8S15.758,7.313,15.375,7z"></path></svg>
  </button>
  <button class="button">Aa</button>
  <input>
</div>

Maybe inline-grid might be a solution.

.button {
  box-sizing: content-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* -webkit-box-pack: center; */
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* -webkit-align-items: center; */
  /* -webkit-box-align: center; */
  -ms-flex-align: center;
  /* align-items: center; */
  font: inherit;
  box-shadow: inset 0 0 0 1px blue;
  margin: 5px;
  padding: 5px 10px;
  border: 0;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  
  /* added */
  position:relative;
  overflow:hidden;
  min-width:35px;
  height:100%;
  box-sizing:border-box;
  margin-top:0;
  margin-bottom:0;
}

.svg {
  height: 1rem; /* no longer what the size is will not affect the button size. .5rem or 2rem it does not matter */
  
  /* added */
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

<div style="display: inline-grid;grid-template-columns:repeat(3,min-content);align-items:center;">
  <button class="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="svg"><path d="M15.375,7L10,2.54C9.695,2.287,9.461,2,9,2C8.375,2,8,2.516,8,3v3H1C0.45,6,0,6.45,0,7v2c0,0.55,0.45,1,1,1h7v3  c0,0.484,0.375,1,1,1c0.461,0,0.695-0.287,1-0.54L15.375,9C15.758,8.688,16,8.445,16,8S15.758,7.313,15.375,7z"></path></svg>
  </button>
  <button class="button">Aa</button>
  <input>
</div>