title: issue with vuetify v-icon
body: <p>I cannot understand why my v-icon is elevated, it does not allow me to set margins or padding (or rather they have no effect) and I have the content set to baseline. Help!</p>
  
  <pre><code>&lt;v-card-text&gt;
            &lt;v-layout justify-start&gt;
              &lt;div class="address"&gt;{{bla bla bla}}&lt;/div&gt;
              &lt;v-icon small color="purple"&gt;verified_user&lt;/v-icon&gt;
              &lt;div class="right-icon loc-info"&gt;
                &lt;v-icon&gt;map&lt;/v-icon&gt;
                &lt;div&gt;Map&lt;/div&gt;&lt;/div&gt;
              &lt;div class="loc-info"&gt;&lt;v-icon&gt;directions&lt;/v-icon&gt;
              &lt;div&gt;Directions&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="loc-info"&gt;&lt;v-icon&gt;share&lt;/v-icon&gt;
              &lt;div&gt;Share&lt;/div&gt;
              &lt;/div&gt;
              &lt;v-spacer&gt;&lt;/v-spacer&gt;
              &lt;v-icon color="grey"&gt;close&lt;/v-icon&gt;
            &lt;/v-layout&gt;
          &lt;/v-card-text&gt;
      ....
      &lt;style&gt;
      .loc-info{
    display: flex;
    align-items: baseline;
  }
  .right-icon{
    margin-left: 20%
  }
  </code></pre>
  
  <p>All this looks like <a href="https://i.stack.imgur.com/0BBxs.png" rel="nofollow noreferrer">this</a>
  <a href="https://i.stack.imgur.com/0BBxs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0BBxs.png" alt="Image of the code above"></a></p>