Angular-Material2: Align text and md-icon vertically to match vertical style?

Question

I know I am probably missing something here. I am trying to align md-icon and some text vertically, right now the word "sample text" displays below the icon.

<div>
  <md-icon>home</md-icon> Sample Text
</div>

Output:

I did try playing around with vertical align on the Sample Text using a span but couldn't get anything working and felt kind of hacky anyway.

Anyone know how to get this effect?

Answer 1

This is a common issue when using <md-icon>. To align the icon and text, you can put your text inside a span and apply style to that:

<div>
  <md-icon>home</md-icon><span class="aligned-with-icon">Sample Text</span>
</div>

In your component.css:

.aligned-with-icon{
    position: absolute;
    margin-top: 5px;
    margin-left: 5px; /* optional */
}

You can also use relative position if you'll be putting multiple icons in the same div. Here is the css for that:

.aligned-with-icon-relative{
    position: relative;
    top: -5px;
    margin-left: 5px; /* optional */
}

---

Another option is to use flex display on the outer div and align-items to center:

In your html:

<div class="with-icon">
  <md-icon>home</md-icon>Sample Text
</div>

In your css:

.with-icon {
    display: flex;
    align-items: center;
}

---

Here is a Plunker Demo