title: CSS - Center align text with icon
body: <p>Using material icons with CSS, I have the following code that renders a link with icon and text.</p>
  
  <pre><code>&lt;a href="#"&gt;&lt;i class="material-icons"&gt;group_work&lt;/i&gt;Groups&lt;/a&gt;
  </code></pre>
  
  <p>As you can see in the image below, the text seems to be sinking down.. I would like them to be vertically aligned center together. How can i achieve this?</p>
  
  <p><a href="https://i.stack.imgur.com/TnplE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TnplE.png" alt="Icon and Text mis-aliged"></a></p>
  
  <p>PS. (Not a designer!)</p>