How can I get an icon verically centered inside a button with Semantic UI
<p>I've add a button inside a a content div which is inside a item div. I want to add a nice "read more" button with an icon inside it. This is the code I've used. </p>

<pre><code>&lt;div class="content"&gt;
  &lt;div class="extra"&gt;
    &lt;a class="ui basic teal button" href="blogs/&lt;%=blogs[i]._id%&gt;"&gt;
      Read more
      &lt;i class="chevron right icon"&gt;&lt;/i&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Which results in a button where the icon is not centered vertically as shown below. </p>

<p><a href="https://i.stack.imgur.com/5zRHQ.png" rel="nofollow"><img src="https://i.stack.imgur.com/5zRHQ.png" alt=""></a></p>