Adjust a Material Icon's Width
<p>I use Angular with Angular Material and have a md-button with an icon and a text. You can see it here:</p>

<p><a href="http://jsfiddle.net/opn0zge9" rel="nofollow">http://jsfiddle.net/opn0zge9</a></p>

<p>Code:</p>

<pre><code>&lt;md-button layout="row" style="width:80px;" layout-align="center center" ng-href=""&gt;
  &lt;div class="material-icons" style="font-size: 36px;"&gt;keyboard_arrow_left&lt;/div&gt;
  &lt;div translate&gt;Back&lt;/div&gt;
&lt;/md-button&gt;
</code></pre>

<p>The icon has a width of 36px. I want it to be smaller, e.g. 24 px. Setting the width of element <code>&lt;div class="material-icons"&gt;</code> does not help since there's still the same large padding left of the icon.</p>

<p>How can I give the icon a width of 24px and achieve that it is centered within these 24px?</p>