Question

我刚开始使用Angular Material。我想知道是否有办法在标签上显示图标而不是常规文本标签。我的问题是，我正在使用它来构建移动应用程序，并且标签文本太大而无法容纳。

Answer 1

md-tabs支持两种语法：其中一种使用label属性，另一种使用md-tab-label和md-tab-body作为标记。此语法是专门为此用例添加的。

您正在使用的语法：

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

这是CodePen演示此语法：

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

Answer 2

基于罗伯特的答案，您甚至可以在标签中组合使用图标和文字。

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

最后，编辑为.md-tab指定的CSS填充，其中默认填充为＆＃34;填充：12px 24px;＆＃34;。将顶部和底部填充为1px，你应该好好去！希望它可以帮助别人！

Answer 3

我明白了。由于您只能为其提供label属性，因此我制作了自己的dingbat字体。做了很多工作，但最终有效，所以我觉得值得。

如果有人卡住，这就是我所做的： http://www.zoersel-tv.be/edius/inkscape-dingbats.pdf

使用Angular Material制作图标标签？

3 个答案: