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

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