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
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?