带图标的材料设计精简版 (MDL) 按钮答案

【问题标题】：material design lite (MDL) button with icon带图标的材料设计精简版 (MDL) 按钮
【发布时间】：2016-01-12 15:19:25
【问题描述】：

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

【问题讨论】：

标签： css material-design material-design-lite

【解决方案1】：

这个怎么样：

<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

【讨论】：

【解决方案2】：

通过添加背景图片解决：

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

【讨论】：

@Fortega 对此问题有更简洁的解决方案，因此我建议 OP 将 Fortega 标记为答案。
这里有一个codepen来展示这个方法：codepen.io/masterdoctor/pen/egPogb