[Documentation] v-btn usage example should hide default slot output when using the icon prop

[06b]

Environment

Vuetify Version: 3.6.6
Vue Version: 3.4.27
Browsers: Edge 124.0.0.0
OS: Windows 10

Steps to reproduce

Add a v-btn with the icon along with some text within it, such as the example shown on the documentation.

Expected Behavior

• The v-btn icon to render the icon.
• Ideally the text to be added as an aria-label.

Actual Behavior

The v-btn icon does not appear and instead it renders the text in place of the icon resulting with the v-btn being round.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

• If I remove the content within the v-btn it renders the icon, & I can add the text via the text prop but it doesn't output that text, which this use case seems like a perfect example for handling accessible labels:
  <v-btn icon="$vuetify" text="button"></v-btn>

[MajesticPotatoe]

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)

[06b]

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>

[MajesticPotatoe]

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.

[06b]

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.