[Bug Report][3.0.5] VBtn size as number does not affect font size

[mcfarljw]

Environment

Vuetify Version: 3.0.5
Vue Version: 3.2.45
Browsers: Chrome 108.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Set the size property of the v-rating component to a numeric value. For example <v-rating :size="100" />.

Expected Behavior

The size of the icons increases to match the specified size.

Actual Behavior

The padding around the icon increases but the icon does not.

Reproduction Link

https://play.vuetifyjs.com/#eNqNkMtqAyEUhl/l9GymhWac0m4aTKC7vkEXNQuZmEHwhpohJOTdozgZkpCbLvTjP+dTzv8Og2/Jj3N1vxY4RRpaL12EIOLazZmR2lkfYQderGAPK281VKm0YoaZ1poQQYcOZjl/rX6FUhb+rFfLl+qNGUqKLokSRKGd4lEkAqD9hLv8AqSVQHNpBkq8lH3uiWWn2PMoTTenZLyWSoCxh5Sm+wYIcitmDBX3nWD4jHAwHGEIL4WbyU3lgx9eCqeD8aNpzm3XPDkeR5ehDJWSk2Hj/h0/66+6wXJ+4+IApYmbBw==

Other comments

#15746 seems to be the same issue but it doesn't seem like it was resolved by the mentioned VBtn fix #15515.

[floroz]

I am taking a look at this one

[kappaflow]

A possible temporary solution:

Setting font-size to v-btn helps to make the button ignore the parent font-size and to scale according to its own size and font-size: Example

In a similar way can be adjusted v-rating

[MetRonnie]

Here is a function for scaling the icon according to the ratio of the default icon size relative to the default button size

function getFontSize (size) {
  return Number.isNaN(parseFloat(size))
    ? undefined
    : `${24 * size / 48 / 1.5 / 16}rem`
}

Playground