cssvue.jsvuejs2stylusvuetify.js

Vuetify icon size

recently I was working on an app using Vuetify and had trouble to change the Vuetify default colors. So I finally ended with this:

https://github.com/vuetifyjs/vuetify/issues/299

Which as its says, I added the following code:

 <style lang="stylus">
  @require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
  $theme := {
    primary: #009688
    accent: #FFC107
    secondary: #00796B
    info: #B2DFDB
    warning: $red.base
    error: $red.base
    success: $green.base
  }
  @require '../node_modules/vuetify/src/stylus/main.styl'
</style>

In App.vue

So when I tested changing colors in the app, it worked as expected, so far so good. Then I noticed that it changed the size of the icons, as pictured below:

Before

After

So, my question is:

Is there a way to solve this problem by not using CSS? If so, how? Or if there's no way, then, how should I solve it using CSS?

Solution

  • Unfortunately in the current version (0.17.6) you will need css to create a custom icon size.

    If you wanted to set a custom default size of your icons across your app you will need to target it will css.

    To target icons size you can use the following:

    .icon {
  font-size: 20px;
}

    If you are using Vuetify v1.0.0-alpha.1 or later, <v-icon> component has a size attribute which you can use to set an exact size.