[Documentation] `v-btn` usage example should hide default slot output when using the icon prop about vuetify HOT 4 OPEN

This is working as intended. icon prop is dual purpose: it performs styling (icon button) and allows for an icon to be passed through, but it is entirely intended to be used with an icon. when you provide content to the the default slot, this overwrites all of the slot content (which includes the default generated icon), using the text prop wouldn't render when icon is being used, as the intended purpose of icon is to display an icon. The equivalent text styling in this manner would be rounded="xl" with text prop

I will say however that there could probably be some pointers updated about this in the docs for clarification (and usage example should probably be fixed to hide default slot output when using the icon prop)

from vuetify.

The explanation makes sense and as I created this issue, I figured it was most likely functioning as designed & there was a bug with the documentation.

In respect of

using the text prop wouldn't render when icon is being used, as the intended purpose of icon is to display an icon. The equivalent text styling in this manner would be rounded="xl" with text prop

What I was suggesting is that when using the text prop with the icon it could act as the text alternative for the icon, since the purpose of the icon is to display the icon, then the text prop purpose would be to ensure that the button's purpose is clear to all users.

For example:
<v-btn icon="mdi-refresh" text="Refresh"></v-btn>
could output the following
<v-btn aria-label="Refresh" icon="mdi-refresh"></v-btn>

from vuetify.

That sounds more like a feature request to have text prop apply aria-label (though doing <v-btn aria-label="Refresh" icon="mdi-refresh" /> works already by itself, and seems to already been discussed to a degree in #11937).

All in all icon isn't intended to work with the text prop outside of maybe using it as a textual avatar button substitute (eg <v-btn icon text="A" />). It applies a strict circular icon button style (akin to v2's fab), and if an icon is provided, displays the icon.

from vuetify.

Agreed, that would be a feature request. On that note, considering the details you've provided, I completely agree with you and I would view this issue as resolved with if the usage example were to hide the default slot output when using the icon prop.

from vuetify.