material design lite (MDL) button with icon

Question

in MDL there are two options: Normal Button:

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

And Icon Button:

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

How is it possible to have a button with icon to the very left, i.e. something like

    <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

How about this:

<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