How can i delete the default icon in vuetify?

Question

I am using vuetify. I needed the "v-combobox" tag, but it has an arrow icon by default, I rummaged through the Vuetify documentation and it didn't help to understand how to remove it, what can I do without losing the application logic? Maby i can kill it at html lvl?

<template>
<v-app>
    <v-combobox
        v-model="chips"
        :items="items"
        chips
        clearable
        multiple
        solo>
        <template v-slot:selection="{ item }">
            <v-chip close @click:close="remove(item)">
                <strong>{{ item }}</strong
                >&nbsp;
            </v-chip>
        </template>
    </v-combobox>
</v-app>
</template>

<script>
export default {
    name: "Test",
    data: () => ({
        chips: ["hello", "stack", "overflow"],
    }),
    methods: {
        remove(item) {
            this.chips.splice(this.chips.indexOf(item), 1);
            this.chips = [...this.chips];
            },
        }
    };
</script>

cmfc31 · Accepted Answer · 2022-03-30T21:02:38.587

1

Check this codesandbox I made: https://codesandbox.io/s/stack-71683514-hide-combobox-arrow-icon-yuto05?file=/src/components/Example.vue

If you just want to hide the icon for an expecific combobox, you can do it with CSS, in this example I just created an special class named noicon-combo, and configured like this:

<v-col cols="12">
  <v-combobox
    v-model="select"
    class="noicon-combo"
    :items="items"
    label="Combobox No Icon"
    multiple
    outlined
    dense
  ></v-combobox>

  <v-combobox
    v-model="select"
    :items="items"
    label="Combobox"
    multiple
    outlined
    dense
  ></v-combobox>
</v-col>

/* Normal version */
.noicon-combo .v-select__slot .v-input__icon {
  display: none !important;
}

/* Scoped version */
.noicon-combo >>>.v-select__slot .v-input__icon {
  display: none !important;
}

edited Mar 30 '22 at 21:02

answered Mar 30 '22 at 20:39

cmfc31

1,385
2
8
9

If it were that easy, I wouldn't post here :( Tried it doesn't work – hajime4life Mar 30 '22 at 20:48
And, it seems to have happened, I deleted the scoped property and it turned out, but I hope this will not affect other 'select' tags – hajime4life Mar 30 '22 at 20:49
Actually, it's that easy. Are you using `scoped` css? – cmfc31 Mar 30 '22 at 20:49
yes, but I have other select tags, I hope this property does not affect everything globally – hajime4life Mar 30 '22 at 20:53
Ah okay, when you are using `scoped` sometimes you might need to use deep selectors. If you want to hide the icon on an specific combobox, then you can create an special class for it. I'll set up an example in codesandbox for you. – cmfc31 Mar 30 '22 at 20:57
There you go. I updated my answer. – cmfc31 Mar 30 '22 at 21:06
yes, thnx, it work's! – hajime4life Mar 30 '22 at 21:07
Thanks! This helped a lot. But if using Sass OR using Vue 3, ref.: https://stackoverflow.com/questions/48032006/how-do-i-use-deep-or-or-v-deep-in-vue-js – Chaos_Is_Harmony May 24 '22 at 16:09

Craig Bennett · Answer 2 · 2023-01-17T23:51:05.627

0

Add this prop to the combobox :append-icon="null"
Have a read of docs here https://vuetifyjs.com/en/api/v-combobox/#links

      <v-combobox
        v-model="chips"
        :items="items"
        chips
        clearable
        multiple
        solo
        :append-icon="null">

edited Jan 17 '23 at 23:51

answered Jan 17 '23 at 02:11

Craig Bennett

1
1

How can i delete the default icon in vuetify?

2 Answers2