[Bug Report] Icons in buttons are too large

[ysb]

Environment

Vuetify Version: 2.2.26
Vue Version: 2.6.11
Browsers: Chrome 80.0.3987.132
OS: Mac OS 10.15.4

Steps to reproduce

• Add a v-btn component.
• Add an some text and icon inside it mdi-cloud-upload

Expected Behavior

• Font size should be 18px.

Actual Behavior

• Still 24px, 18px is being overrided. You can see in screenshot below.

Reproduction Link

https://github.com/mpaksoy/vuetify-build-test

Other comments

Vue cli version: 4.3.1

I use vuetify for a big project. But some styles are breaking when I build project. There is no other library then vue, vuex, vuerouter and vuetify in project.
I created a fresh project and tested on it, same problem again. You can check it on GitHub link. I shared screenshots as well.

I’ve solved the problem on main project by creating an overrides.scss file and adding !important to all lines, but this is not an elegant way.

https://snipboard.io/bh4kxt.jpg
https://snipboard.io/r9MRlI.jpg

Thanks.

[YipingRuan]

Similar to #8067 ?

[KaelWD]

3d9dc50

[jbergfi]

I've just struck into the same issue when trying to place icons to left or right in buttons. On the demo site it looks ok, it's probably depending on how you've installed Vuetify (using vuetify loader/A-la-carte or not?) since the order of styles in the style sheet are different there compared to my project. I also created a codepen from the vuetify template that displays the issue: https://codepen.io/jbergfi/pen/PoNmbmV

My workaround is to specify size="18" on the v-icon

[KaelWD]

In v3 I've made icons default to 18px, scaling with the button's font-size:

This only applies to the default size, if you do <v-icon size="large"> it'll use the non-scaled large size instead.