How to vertical align button contents with bootstrap 4

Question

I am using bootstrap 4 and material icons in my app. The problem is when I have a button with both text and an icon.

.button-icon {
  vertical-align: middle;
}

<button class="button-icon">
    <i class="material-icons">account_box</i>
    My Account
</button>

I've tried changing the font size for the icon but that throws off the size of other icons throughout the page.

I am just trying to get the text to line center with the icon. Thank you for any help.

Answer 1

One way to do it is with the Flexbox utility classes, .d-flex .align-items-center in this case.

<button class="btn button-icon d-flex align-items-center">
    <i class="material-icons">account_box</i>
    My Account
</button>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">