CODEWITHSUNDEEP
vue.jsiconsvuetify.jsmaterial-design-icons
BlondeSwan
BlondeSwan

Reputation: 782

Vuetify icons rendering with excess width

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?

Upvotes: 1

Views: 299

Answers (2)

powder
powder

Reputation: 1

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

Upvotes: 0

Idan
Idan

Reputation: 5450

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>

Upvotes: 1

Related Questions