Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][3.3.8] v-icon doesn't display "icon" when slot is filled #17807

Closed
Modjular opened this issue Jul 14, 2023 · 2 comments
Closed

[Bug Report][3.3.8] v-icon doesn't display "icon" when slot is filled #17807

Modjular opened this issue Jul 14, 2023 · 2 comments
Labels
S: stale This issue is untriaged and hasn't seen any activity in at least six months. S: triage

Comments

@Modjular
Copy link

Environment

Vuetify Version: 3.3.8
Vue Version: 3.3.4
Browsers: Chrome 114.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Create an empty v-btn. Populate the icon prop. An icon-button should appear
Add a comment or an empty <template></template>. The icon disappears, but the button remains.

Expected Behavior

Icon remains

Actual Behavior

Icon disappears

Reproduction Link

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

Other comments

This is mostly annoying when using an icon-button to activate a v-dialog. The modal sits inside the button, but there's no actual "content" in the slot, which I assume tells the component to not utilize the icon anymore.

I can see this not being a bug, just unintended but technically correct behavior.

@github-actions github-actions bot added the S: stale This issue is untriaged and hasn't seen any activity in at least six months. label Feb 15, 2024
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Mar 3, 2024
@yubaoquan
Copy link

Am I facing the same issue?
Icon gone, a blank round button remains.
This is expected behavior?

<v-btn density="compact" icon="mdi-filter" color="#e2e8f0">
    <v-dialog activator="parent" max-width="340">
      <template #default="{ isActive }">
        <v-card prepend-icon="mdi-filter" :title="$t('dutor.setFilterConditions')">
          <v-divider></v-divider>
          <v-card-text class="px-4"> building... </v-card-text>
          <v-card-actions>
            <v-btn :text="$t('common.cancel')" @click="isActive.value = false"></v-btn>
            <v-spacer></v-spacer>
            <v-btn
              color="surface-variant"
              :text="$t('common.confirm')"
              variant="flat"
              @click="handleConfirm(isActive)"
            ></v-btn>
          </v-card-actions>
        </v-card>
      </template>
    </v-dialog>
  </v-btn>
@emelendez
Copy link

I don't understand why this bug is closed,
as today i faced this problem with:

<v-btn  icon="mdi-eye" >
    <v-dialog activator="parent">
        <v-sheet class="bg-white">
            <ita-form-recommended />
        </v-sheet>
    </v-dialog>
</v-btn>

At least, in VDialog documentation show a warning using activator="parent" within a VBtn of type "icon"
where a correct use would be:

<v-btn  icon>
   <v-icon icon="mdi-eye" />
    <v-dialog activator="parent">
        <v-sheet class="bg-white">
            <ita-form-recommended />
        </v-sheet>
    </v-dialog>
</v-btn>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
S: stale This issue is untriaged and hasn't seen any activity in at least six months. S: triage
3 participants