材料设计精简版（MDL）按钮，图标

Question

在MDL有两种选择：普通按钮：

<button className="mdl-button mdl-js-button"> 
     Continue with Facebook 
    </button> 

和图标按钮：

<button className="mdl-button mdl-js-button mdl-button--icon"> 
     <i className="material-icons">mood</i> 
    </button> 

这怎么可能有图标的按钮在最左边，也就是像

<button className="mdl-button mdl-js-button mdl-button--raised mdl-button--icon-left"> 
     <i className="material-icons">mood</i> Continue with Facebook 
    </button> 

Answer 1

通过添加背景图片解决它：

background-image: 'url("/assets/images/facebook-icon.png")'; 
background-repeat: 'no-repeat'; 
background-size: 'contain', 

Answer 2

如何：

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> 
    <i class="material-icons">add_shopping_cart</i>Add to shopping cart 
</button> 

Codepen