google icon on button make white space - html

Question

I have some buttons but the button with google icon inside produce a white space, if I change the icon (span) using text the circle one will be aligned to another correctly, i think its the span of the google icon but have no idea how to fix it, hope someone can help, thanks in advance
this is html
<div className="col-left">
<Button icon="add" className="mr-8" theme="primary|md" handleClick={()=> alert(1)} label="Create" />
<Button className="mr-5" theme="primary-transparent|md" handleClick={()=> alert(1)} label="Approve" />
<Button className="mr-5" theme="primary-transparent|md" handleClick={()=> alert(1)} label="Decline" />
<Button className="mr-5" theme="primary-transparent|md" handleClick={()=> alert(1)} label="Approve" />
{/* <span className="separator"></span> */}
<Button icon="add" className="mr-5" theme="primary-transparent|circle|md" />
</div>
this is the scss
.btn {
display: inline-grid;
border: 0;
background: red !important;
cursor: pointer;
&.btn-md {
font-size: 22px;
height: 40px;
}
&.btn-sm {
font-size: 18px;
span {
font-size: inherit;
}
}
&.btn-a {
color: #777;
background: transparent;
&:hover {
background: #e7e6e5;
}
}
&.btn-circle {
display: inline-grid;
background: $clr-primary;
place-items: center;
&.btn-sm {
#include circle(40px);
}
&.btn-md {
#include circle(40px);
}
span {
grid-column: 1/2;
margin: 0;
}
}
&.btn-primary {
background: $clr-primary;
color: white;
border-radius: 2px;
padding: 0px 16px;
font-size: 13px;
align-items: center;
}
span {
display: inline-block;
grid-column: 2/3;
margin-left: 10px;
font-size: 16px;
}
&.btn-primary-transparent {
border-radius: 2px;
padding: 8px 8px;
font-weight: 700;
color: $clr-primary;
font-size: 13px;
background: #fafafa;
align-items: center;
}
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 4px;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';

Answer 1

You can add css to the parent div. This should work without any other modifications as you have margins set to your buttons. The display: flex; (on the parent) will remove the need of using inline-block on the buttons.
.col-left {
display: flex;
align-items: center;
}