title: Trying to vertically align icons and divs
body: <p>I'm using <a href="http://materializecss.com" rel="nofollow noreferrer">materializecss</a>, and I need help to align the contents vertically center only. I'm not good with CSS.</p>
  
  <p><a href="https://jsfiddle.net/Shank09/z0pu0znm/" rel="nofollow noreferrer">https://jsfiddle.net/Shank09/z0pu0znm/</a></p>
  
  <p>I've played around with <code>line-height</code>, <code>font-size</code>, and <code>margin</code>.</p>
  
  <p>Here is the image: </p>
  
  <p><a href="https://i.stack.imgur.com/4Tykr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Tykr.png" alt="enter image description here"></a></p>
  
  <p>HTML code:</p>
  
  <pre><code>   &lt;div class="col s12 m6"&gt;
        &lt;div class="card"&gt;
           &lt;div class="card-content"&gt;
              &lt;span class="card-title"&gt;
                &lt;i class="material-icons"&gt;business_center&lt;/i&gt;
                  My List
                &lt;span id="listcount"&gt;
                  (12)
                &lt;/span&gt;
                &lt;i class="material-icons right"&gt;search&lt;/i&gt;
                &lt;span class="new badge yellow" data-badge-caption=""&gt;
                  1
                &lt;/span&gt;
                &lt;span class="new badge red" data-badge-caption=""&gt;
                  12
                &lt;/span&gt;
                &lt;span class="new badge green" data-badge-caption=""&gt;
                  1
                &lt;/span&gt;
              &lt;/span&gt;
  </code></pre>
  
  <p>I'm aiming for:</p>
  
  <p><a href="https://i.stack.imgur.com/v6yGC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v6yGC.png" alt="enter image description here"></a></p>