Vuetify icon size

Question

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?

Answer 1

You can give icon size in px using size property in Vuetify icons.

<v-icon size="25">home</v-icon>

Or you can use x-small, small, medium, large and x-large in v-icon tag e.g.

<v-icon small >home</v-icon>

Answer 2

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.