Material: md-tabs with md-icons

[amritk]

Is it possible to use md-icons within md-tabs as shown in the material design components:

https://www.google.com/design/spec/components/tabs.html#tabs-usage

[MattKetmo]

You can simply put a md-icon inside a md-tab-panel:

<md-tabs>
  <md-tab>
    <md-tab-label>
      <md-icon md-svg-icon="img/icons/icon.svg"></md-icon>
    </md-tab-label>
    <md-tab-body>
      Lorem
    </md-tab-body>
  </md-tab>
</md-tabs>

Example: http://codepen.io/anon/pen/bdKdwM

However if you want an icon + a label below you may need to customise the css to enlarge the height of the tab.

[robertmesserle]

This isn't supported out of the box right now; however, I forked the CodePen that @MattKetmo posted above and added these tweaks:

http://codepen.io/robertmesserle/pen/PqaGrm

[amritk]

Many thanks!

[websirnik]

Atm md-icon inside the active tab does not change color. In my case it does not look great.

[george3447]

+1

[Pelu2k12]

+1

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.