title: Bootstrap Badge - Text Not Centered in Badge
body: <p>I can't figure out how to get my text to align with the middle of my icon. This is using Chrome. See <a href="http://jsfiddle.net/aq9Laaew/25232/" rel="nofollow noreferrer">this fiddle</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
  
  .row {
    background: #f8f9fa;
    margin-top: 20px;
  }
  
  .col {
    border: solid 1px #6c757d;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;label class="badge badge-secondary align-middle"&gt;
    &lt;span class="pb-2"&gt;Should Be Centered&lt;/span&gt;
    &lt;i class="material-icons md-18"&gt;cancel&lt;/i&gt;
  &lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any suggestion is welcome!</p>
  
  <p>Example image:</p>
  
  <p><a href="https://i.stack.imgur.com/LG4Uk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LG4Uk.png" alt="enter image description here"></a></p>