Making icon tabs with Angular Material?

Question

I'm just getting started with Angular Material. I was wondering if there was a way to display icons on tabs instead of regular text labels. My issue is, I 'm using it to build a mobile application, and tab text is way too large to fit in.

Answer 1

There are two supported syntaxes for md-tabs: one of them uses the label attribute and the other uses md-tab-label and md-tab-body as tags. This syntax was added specifically for this use-case.

The syntax you are using:

<md-tabs>
  <md-tab label="One">
    Tab One Content
  </md-tab>
</md-tabs>

The syntax that you are most-likely looking for:

<md-tabs>
  <md-tab>
    <md-tab-label>One</md-tab-label>
    <md-tab-body>Tab One Content</md-tab-body>
  </md-tab>
</md-tabs>

Here's a CodePen demonstrating this syntax:

http://codepen.io/robertmesserle/pen/7bbeaf916d45ac2dde4967cf57307338?editors=100

Answer 2

To build on Robert's answer, you can even do a combination of an icon and text in a tab.

       <md-tab id="tab1" class="less-padding">
        <md-tab-label>
          <section layout="column" layout-align="center center">
            <md-icon md-svg-src=".svg" class="md-accent"></md-icon>
            Yes/No
          </section>
        </md-tab-label>
        <md-tab-body>
          View for Item #1 <br/>
          data.selectedIndex = 0;
        </md-tab-body>
      </md-tab>

Finally, edit the CSS padding given for .md-tab where the default padding is "padding: 12px 24px;". Make top and bottom padding as 1px and you should be good to go! Hope it helps someone!