Search code examples
vuetifyjs3

After upgrade from vuetify 2 to vuetify 3, icons are smaller and darker

After I upgraded from vuetify 2 to 3, google material desing icons are darker and smaller enter image description here

enter image description here

I am still including google font icons from CDN link

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

And adding the icon as follows (the same code between versions)

<v-btn
 color="primary"
 v-bind="props"
 dark text fab large
>
  <v-icon icon="account_circle"></v-icon>
</v-btn>

Is there a theme to specify the

Solution

  • Because both dark and large props are removed in Vuetify 3. The props in Vuetify 3 have changed, and you can set icon of a button directly via icon prop:

    <v-btn
 color="primary"
 v-bind="props"
 theme="dark"
 variant="text"
 size="large"
 icon="account_circle"
/>

    Ref: https://vuetifyjs.com/en/api/v-btn/