I'm encountering a design problem when incorporating material2 icons into my Angular application. Specifically, I have a button that displays both a material2 icon and some text side by side from left to right. Currently, the icons are centered within the button, but the text is positioned below the icon, causing it not to be centered on the button.
Below is the HTML code:
<div id="wizard-container">
<div class="intake-step-item">
<span><i class="material-icons md-28">face</i></span><span class="intake-step-title">General</span>
</div>
<div class="intake-step-item">
<span><i class="material-icons md-28">perm_contact_calendar</i></span><span class="intake-step-title">Availability</span>
</div>
</div>
Here's the relevant CSS:
#wizard-container {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: space-around;
align-items: center;
z-index: -10;
}
.intake-step-item {
background: #d7d7d7;
width: 160px;
height: 30px;
margin: 5px;
padding: 10px;
border-radius: 15px;
justify-content: space-around;
align-items: center;
text-align: center;
z-index: 100;
}
.intake-step-item > .active {
background: #46AB61;
}
.intake-step-title {
display: inline-block;
vertical-align: middle;
text-align: center;
}
.material-icons.md-28 {
font-size: 28px;
padding: 4px; }
I attempted using negative margin and padding on the title text, but it didn't solve the issue. How can I ensure the title text of each button aligns in the center of the button?