vertical alignment of google-material-icons when replacing fontawesome icons in a bootstrap page

Question

I have an html page, that uses bootstrap 5.3 for layout (e.g. buttons) and fontawesome 6.4 for icons. Both bootstrap and fontawesome are included via a CDN.

I want to transition to the latest google material icons font, while keeping bootstrap. I have made an experiment having both icons and a text, and ee misaligment between the google material icon and the rest. I tried comparing and copying all the differences, to no avail. I can fix it by wrapping it all in a div with styled with display:flex; align-items:center. It worked (example below). If nothing else works, I'll do that. However I'd prefer to 1. undertand why it happens, and 2. fix it at the scss global level once.

The stand-alone html file below shows the problem with the icons alignment with and without bootstrap classes for a button, and the best solution I have so far, which is the extra div wrapper.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">


<button>
  <i class="fa fa-sign-in-alt"></i>
  <i class="material-icons">login</i>
  Login
</button>

<button style="display:flex; align-items:center">
  <i class="fa fa-sign-in-alt"></i>
  <i class="material-icons">login</i>
  Login
</button>

<button class="btn btn-lg btn-primary ">
  <i class="fa fa-sign-in-alt"></i>
  <i class="material-icons">login</i>
  Login
</button>

<button class="btn btn-lg btn-primary ">
  <div style="display:flex; align-items:center">
    <i class="fa fa-sign-in-alt"></i>
    <i class="material-icons">login</i>
    Login
  </div>
</button>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Answer 1

Material icons are uniformly center aligned in a 512x512 square placed at the font's baseline.

Unlike fontAwesome or regular (alphabetic) fonts the visible glyphs/icon shapes are not visually aligned to the baseline

As a workaround you might add a baseline shift class e.g using a translateY() transform.

.material-icons-baseline {
  transform: translateY(0.2em)
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

<h3>Baseline shift</h3>
<p>
  <i class="material-icons material-icons-baseline">home</i> Home
  <i class="material-icons material-icons-baseline">login</i> Login
</p>

<h3>No Baseline shift</h3>
<p>
  <i class="material-icons">home</i> Home
  <i class="material-icons">login</i> Login
</p>

<button>
  <i class="fa fa-sign-in-alt"></i>
  <i class="material-icons material-icons-baseline">login</i>
  Login
</button>

<button style="display:flex; align-items:center">
  <i class="fa fa-sign-in-alt"></i>
  <i class="material-icons">login</i>
  Login
</button>

<button class="btn btn-lg btn-primary ">
  <i class="fa fa-sign-in-alt"></i>
  <i class="material-icons material-icons-baseline">login</i>
  Login
</button>

<button class="btn btn-lg btn-primary ">
  <div style="display:flex; align-items:center">
    <i class="fa fa-sign-in-alt"></i>
    <i class="material-icons">login</i>
    Login
  </div>
</button>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

</body>

</html>