Angularjs 用角材料制作图标标签？

我刚开始学习棱角材料。我想知道是否有一种方法可以在选项卡上显示图标，而不是常规的文本标签。我的问题是，我正在用它来构建一个移动应用程序，而标签文本太大，无法容纳。

我发现了它。 因为您只能为它提供标签属性，所以我制作了自己的dingbat字体。虽然做了很多工作，但最终还是成功了，所以我想这是值得的

如果有人卡住了，我就是这么做的：

---

对于

md选项卡

，有两种受支持的语法：一种使用

标签

属性，另一种使用

md选项卡标签

和

md选项卡主体

作为标记。此语法是专门为此用例添加的

您正在使用的语法：

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

表一内容

您最可能要查找的语法：

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

一个
表一内容

下面是一个代码笔，演示此语法：

---

根据Robert的答案，您甚至可以在选项卡中组合图标和文本

       <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>

是/否
项目#1的视图

data.selectedIndex=0；

---

最后，编辑为.md选项卡提供的CSS填充，其中默认填充为“padding:12px 24px；”。把顶部和底部的填充物做成1px，你就可以走了！希望它能帮助别人

对于角材质，可以使用mat图标来显示图标按钮，而不是大文本

它将显示如下：

下面是它的示例代码

<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>

竖起大拇指
弗斯特
内容1
竖起大拇指
第二
内容2
竖起大拇指
第三
内容3

Wow这让我看起来很傻：P非常感谢！：）