1

I'm just starting on a Vue project that uses Vuetify and I am attempting to render some icons with v-icon.

In my component, I have this code:

<template>
  <div>
    <v-icon>domain<v-icon>
    <v-icon>credit_card_outline</v-icon>
  </div>
</template>

The rendering of the domain icon comes in just fine. However, the rendering of the credit_card_outline is rendered with a height of 45px but a width of like 216px

enter image description here

It's almost like it's rendering space for the actual text as well... It works correct for a number of icons (playlist_add works for example), but for a number of icons it doesn't....

What could possibly be causing this bug?

BlondeSwan
  • 772
  • 5
  • 26

2 Answers2

1

I do not have an elaborate answer about the difference between the two, Vue does not work well with mdi icons with _

This will not have the extra space:

<v-icon> mdi-credit-card-outline </v-icon>
Idan
  • 5,405
  • 7
  • 35
  • 52
  • Unfortunately, when I do that, no icon appears at all. In fact, if I use the `mdi-` prefix on any icon they don't appear – BlondeSwan Jul 29 '21 at 13:39
  • Some mdi icons just don't work well, like stated above, I really not sure of the reason. But you can add the mdi lib, look for Material icons: https://vuetifyjs.com/en/features/icon-fonts/#usage – Idan Jul 29 '21 at 13:59
0

You must add Class in <v-icon>

<v-icon class="material-symbols-outlined">credit_card</v-icon>

Which you can find Class in https://fonts.google.com/icons?selected=Material+Symbols+Outlined:credit_card:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=credit&icon.set=Material+Symbols that section Inserting the icon

powder
  • 1
  • 1