align material icon with the text

Question

I'm using Material icons with the code below, but the icon has some style that puts the icon not aligned with the text. Do you know how to align the icon with the text?

https://jsfiddle.net/u127zxak/1/

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  background-color: red;
  display: inline;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-info hr {
  border-top-color: #abdde5;
}

.alert-info .alert-link {
  color: #062c33;
}

<div class="alert alert-info" role="alert">
  <span><i class="material-icons">face</i></span>

  <span>
        Test
      </span>
</div>

What do you mean by aligning the icon with text? I also don't see any icon in the JSFiddle — GalAbra, Feb 09 '18 at 23:54
Does this answer your question? [Align material icon with text on Materialize](https://stackoverflow.com/questions/39907145/align-material-icon-with-text-on-materialize) — Matthias Arras, Jan 11 '22 at 13:03

score 11 · Accepted Answer · answered Feb 12 '18 at 15:01

Set the icon <i> to vertical-align: middle;.

I would also remove the <span> tags, they're not really doing anything.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  vertical-align: middle; /* new */
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  background-color: red;
  display: inline;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

<div class="alert alert-info" role="alert">
  <i class="material-icons">face</i> Test
</div>

I had to scale() the material-icon, I had to set the icon to vertical-align: middle which was crucial (thanks for this). I also found that I got the best vertical setting for the text after the icon by setting vertical-align: text-top (which was NOT intuitive). — StackOverflowUser, Apr 23 '22 at 05:30

score 1 · Answer 2 · answered Feb 12 '18 at 15:03

using flex you can align items perfectly,

<div class="alert alert-info" role="alert">
  <i class="material-icons">face</i>

  <span class="text">
    Test
  </span>
</div>

and in the CSS

.alert {
    display: flex;
    ...
}

.alert .text {
    align-self: center;
}

align material icon with the text

2 Answers2