Как добавить значок над некоторым текстом на кнопку MDL

Question

Как вы можете добавить значок над некоторым текстом в компонент элемента дизайна 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; 
    } 
}