issue with vuetify v-icon

Question

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!

<v-card-text>
          <v-layout justify-start>
            <div class="address">{{bla bla bla}}</div>
            <v-icon small color="purple">verified_user</v-icon>
            <div class="right-icon loc-info">
              <v-icon>map</v-icon>
              <div>Map</div></div>
            <div class="loc-info"><v-icon>directions</v-icon>
            <div>Directions</div>
            </div>
            <div class="loc-info"><v-icon>share</v-icon>
            <div>Share</div>
            </div>
            <v-spacer></v-spacer>
            <v-icon color="grey">close</v-icon>
          </v-layout>
        </v-card-text>
    ....
    <style>
    .loc-info{
  display: flex;
  align-items: baseline;
}
.right-icon{
  margin-left: 20%
}

All this looks like this

score 1 · Answer 1 · answered Mar 11 '19 at 14:55

1

You are styling container. Try to set vuetify props to v-icon such as mb2 or just add class to v-icon.

answered Mar 11 '19 at 14:55

lysy.vlc

79
1
10

What do you mean by `mb2` that is not on the api? – Michael Mar 11 '19 at 17:28
1

`mb2` means `$spacer * .5` Please, check out this link [https://vuetifyjs.com/en/framework/spacing] – lysy.vlc Mar 11 '19 at 23:20

score 1 · Answer 2 · answered Mar 11 '19 at 17:52

1

I tried what was suggested here: CSS - Center align text with icon

I was able to modify the built in style provided by vuetify with v-icon

.material-icons { vertical-align: middle }

answered Mar 11 '19 at 17:52

Michael

4,538
5
31
58

issue with vuetify v-icon

2 Answers2