title: How to vertical allign list items with icons
body: <p>Can someone help me understand how can I vertical align this?
  <a href="https://jsfiddle.net/hds9pxzf/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.css"
  &gt;&lt;/link&gt;
  
  &lt;aside class="menu column is-2 full-height"&gt;
      &lt;ul class="menu-list"&gt;
      &lt;li&gt;
          &lt;a href="#" class=""&gt;
              &lt;i class="mdi mdi-file-document-box mdi-48px"&gt;&lt;/i&gt;
              &lt;span&gt;Document&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#" class=""&gt;
              &lt;i class="mdi mdi-file-document-box mdi-48px"&gt;&lt;/i&gt;
              &lt;span&gt;Document&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/aside&gt;
  </code></pre>
  
  <p>I need align icon and text next to it?
  there is some more css since I'm using bulma.io and something custom but not so relevant I think</p>
  
  <p>You can delete that css and create new one if it is not ok</p>