CODEWITHSUNDEEP
angularjsangular-material
sdnts
sdnts

Reputation: 728

Making icon tabs with Angular Material?

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.

Upvotes: 7

Views: 11972

Answers (3)

Abdus Salam Azad
Abdus Salam Azad

Reputation: 5502

For Angular Material, you can use mat-icon to show icon button instead of large text.

It will show like this: enter image description here

Here is a sample code for it.

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      First
    </ng-template>
    Content 1
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Second
    </ng-template>
    Content 2
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Third
    </ng-template>

    Content 3
  </mat-tab>
</mat-tab-group>

Upvotes: 2

mutp
mutp

Reputation: 2389

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!

Upvotes: 2

Robert Messerle
Robert Messerle

Reputation: 3032

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

Upvotes: 15

Related Questions