title: CSS - positioning icon inside a button
body: <p>I'm trying to add an icon inside a button. The problem is that whenever I add the icon, it changes the shape of the button (it makes it taller, and sometimes wider depending on how big the icon is), and it mis-aligns the text of the button so that it is no longer centered, rather the text has been pushed down.</p>
  
  <pre><code> &lt;button&gt;
     &lt;i class="material-icons"&gt;weekend&lt;/i&gt;
     Test
   &lt;/button&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>i {
      color: #669FAB;
      font-size: 24px !important;
   }
  
   button {
      min-width: 100px;
   }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/uxs71ymz/1/" rel="nofollow noreferrer">https://jsfiddle.net/uxs71ymz/1/</a></p>
  
  <p>I would like the icon to shift to the left, while having the text remain centered inside the button.</p>