I have two buttons in a row, both containing icons, but if one of the icons is larger, the other button gets pushed down despite same height. Why?

I am using Web Components on Stencil.js. I have an icon component, and a button component. I have nested the icon component inside the button component, but I have noticed that, when I have two buttons aligned next to each other, and one of them has an icon a bit larger than the other one, the other button gets pushed down. This is to be expected if the line-height is larger, but in my case, I don’t think that it is.

Button:

<button >
   {this.icon && this.position === 'left' && <ifx-icon icon={this.icon}></ifx-icon>}
   <slot></slot>
   {this.icon && this.position === 'right' && <ifx-icon icon={this.icon}></ifx-icon>}
</button>

Relevant button css:

.btn {
  display: inline-flex; 
  align-items: center;
  min-width: 80px;
  min-height: 40px;
  padding: 0px 16px;
  gap: 8px;
  color: #FFFFFF;
  flex-direction: row;
  font-weight: 600;
  border-radius: 1px;
  line-height: 24px;
  outline: none;
  font-family: tokens.$font-family-body;
  text-decoration: none;
  user-select: none;
  border: 1px solid rgba(0, 0, 0, 0);
  font-size: 1rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

Icon component:

 <Host>
    {this.constructIcon()}
 </Host>

Icon component CSS:

ifx-icon { 
  display: inline-flex;
}

HTML:
my button
my button

Result:

If both icons are bell-16, both buttons are perfectly alined.
If I removed the inline-flex from the icon component, I get this:

..obviously because the icon is not aligned in the center inside the icon component, and has larger line-height than the text.

Question: What pushes the left button down when the right one has a larger icon? Is it the line-height of the icon svg? If so, can it be prevented?