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

时间:2015-10-14 13:40:20

标签: css material-design material-design-lite

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>

2 个答案:

答案 0 :(得分:9)

这个怎么样:

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

enter image description here

Codepen

答案 1 :(得分:2)

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

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