用角材制作图标标签？

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

我想通了。 由于您只能为其提供标签属性，因此我制作了自己的dingbat字体。工作很多，但最终奏效了，所以我想这是值得的。

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

Answer 3

建立在罗伯特的答案上，你甚至可以做一个组合图标和标签中的文字。

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

最后，编辑默认填充为“padding：12px 24px;”的.md-tab给定的CSS填充。使顶部和底部填充为1px，你应该很好去！希望它能帮助别人！