如何在MDL按钮上的某些文本上方添加图标

Question

如何在材质设计精简按钮组件中的某些文字上方添加图标？文档中没有任何示例。我的尝试不起作用。

   <button class="mdl-button mdl-js-button mdl-button--fab">
      <table>
         <tr>
            <td><i class="material-icons">add</i></td>
         </tr>
         <tr>
            <td>Text</td>
         </tr>
      </table>
   </button>

Answer 1

它可能不遵循MDL指南标记，但这可能会为您完成工作。请参见示例codepen

<button class="my-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
        <i class="material-icons">delete</i>
        <label> text</label>
</button>


.my-btn {
  display: flex !important;
  flex-direction: column;
  height:auto !important;

  >*{
    align-self:center;
  }
}