如何在 MDL 按钮上的某些文本上方包含一个图标

Question

如何在 material design lite 按钮组件中的某些文本上方包含图标？文档中没有任何示例。我的尝试无效。

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

如何在 MDL 按钮上的某些文本上方包含一个图标

How to include an icon above some text on MDL button

material-design-lite