3

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.

Niveditha Karmegam
  • 710
  • 9
  • 26
  • 1
    Those are vertically aligned by default. You need to post the full HTML output if you want help with troubleshooting. – WebDevBooster Jan 29 '18 at 00:44

1 Answers1

15

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">
dferenc
  • 7,163
  • 12
  • 36
  • 42