Icons on md-tab-link and md-tab is not aligned

[sondreb]

Bug, feature request, or proposal:

Icons are not aligned when used together with md-tab-nav-bar and md-tab-link.

What is the expected behavior?

Expecting to see the icon aligned middle with the text.

What is the current behavior?

Icons is aligned too high.

What are the steps to reproduce?

Source:

<nav md-tab-nav-bar>
	<a md-tab-link>TEST</a>
	<a md-tab-link><md-icon>cloud</md-icon> TEST</a>
</nav>

Screenshot:

Source for inline tab:

<md-tab-group>
	<md-tab>
		<ng-template md-tab-label>
			<md-icon>cloud</md-icon> TEST
		</ng-template>
		<h1>Some tab content</h1>
	</md-tab>
	<md-tab label="TEST">
		<h1>Some more tab content</h1>
	</md-tab>
</md-tab-group>

What is the use-case or motivation for changing an existing behavior?

Shouldn't need to write custom CSS to use icons on tabs or navigation.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.2.5, Material beta 8, TypeScript 2.3.2, tested in Chrome.

[sondreb]

Workaround:

.tab-icon {
	vertical-align: middle;
}

<md-icon class="tab-icon">date_range</md-icon> select a date</a>

Screenshot:

[Robouste]

I think vertical-align: middle; is not good enough

Now, the icon is too low

[crisbeto]

Should be fixed in master. Closing since it looks like I forgot to label #5771 properly.

[Robouste]

In wait for the fix, adding font-size: 20px; to vertical-align make it looks good

[brandon1525]

.tab-icon {
  vertical-align: middle;
}
.tab-text {
        margin-left: 5px;
        vertical-align: middle;
}

<nav md-tab-nav-bar>
  <div class="icon-text-inline" md-tab-link>
    <md-icon class="tab-icon">{{link.icon}}</md-icon>
    <span class="tab-text">{{link.title}}</span>
  </div>
</nav>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}