Vuetify icon size
Asked Answered
L

6

24

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?

Latrena answered 5/1, 2018 at 18:9 Comment(0)
M
5

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.

Mannos answered 5/1, 2018 at 20:0 Comment(1)
I'm currently using the version 0.17.6 as you mentioned, so for now, you're right, apparently the only way to solve this is by using css. Thank you very much for your answer, I was struggling with no-sense to solve this.Latrena
G
45

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

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

You can also use x-small, small, medium, large and x-large in v-icon tag:

<v-icon small>home</v-icon>
Gignac answered 13/4, 2019 at 16:46 Comment(1)
Thanks this is the best kind of solution.Bueno
M
5

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.

Mannos answered 5/1, 2018 at 20:0 Comment(1)
I'm currently using the version 0.17.6 as you mentioned, so for now, you're right, apparently the only way to solve this is by using css. Thank you very much for your answer, I was struggling with no-sense to solve this.Latrena
H
5

here is the sample inline css from v-icon

<v-icon style="font-size: 5px;">home</v-icon>

here is my sample pen

https://codepen.io/anon/pen/LdpgmY

Heroine answered 13/3, 2018 at 7:33 Comment(1)
Please edit your answer to add the codes to the answer itself.Srini
P
0

I recommend just using an <i> tag and setting the icon classes yourself if you can. <v-icon> doesn't provide much advantage anyways and the v-icon class is the one that's setting a specific font-size when all you really want is font-size: inherit.

Praemunire answered 16/9, 2019 at 14:34 Comment(0)
S
0

I'm not sure that the change of colors is giving you the issue with the change of icons size, but if you don't want to set the icon size each time, you can optionally pass in custom variables to overwrite the global defaults like this:

$icon-size: 20px;

You can find more information about this in the Vuetify Documentation

enter image description here

Shem answered 19/3, 2021 at 19:55 Comment(0)
C
0

You can just add size="x-small" to the v-icon element.

Examples: <v-icon icon="$vuetify" size="x-small"></v-icon>

Documentation: https://vuetifyjs.com/en/components/icons/#usage

Catalano answered 29/11, 2023 at 7:7 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.