[Bug Report][3.0.0-beta.2] 'icon' prop issue in various component definitions

[TechAkayy]

Environment

Vuetify Version: 3.0.0-beta.2
Vue Version: 3.2.33
Browsers: Chrome 101.0.4951.64
OS: Mac OS 10.15.7

Steps to reproduce

When icon prop in various components like VAlert, VAvatar, VAppbar, VBadget etc are passed as an object, there are numerous warning messages in the console indicating prop definition issues. This issue was confirmed by @nekosaur on discord - https://discord.com/channels/340160225338195969/976838579932241920/976841859332730890

Specifically - Invalid prop: type check failed for prop "icon". Expected Boolean | String, got Object

The reproduction link has the above mentioned components, but it looks like all components using icon as prop might have the same issue.

Expected Behavior

icon prop must accept string, boolean or object

Actual Behavior

icon prop accepts only string, throws warning when object is bound

Reproduction Link

https://stackblitz.com/github/techakayy/vuetify3-beta-unplugin-icons?file=src%2FApp.vue

[KaelWD]

Holy hell we've got a lot of icon props

[TechAkayy]

Holy hell we've got a lot of icon props

Hi @KaelWD , thanks for fixing this issue.

So, the icon prop could be either a String, Object or a Function is what I understand looking at icons.tsx composable.

Could it also be 'Boolean'?

Back in vuetify2.x, the icon prop's type wasn't consistent across all components, for eg, v-btn api stated it as boolean (https://vuetifyjs.com/en/api/v-btn/#props), while v-alert stated it as boolean | string (https://vuetifyjs.com/en/api/v-alert/#props), while in most components it was of type 'any'. Cheers!

[KaelWD]

Two components have specific support for Boolean:

• v-btn can be <v-btn icon> which gives it a specific rounded style
• v-alert has a default icon for each type, but that can be disabled by setting :icon="false"

I suppose it could be added for other props too, currently setting them to false will throw Icon value is undefined or null