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

822
1
6
8

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

score 0 · Answer 2 · answered Mar 30 '22 at 20:54

If you only want to hide arrow icon:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      chips: ["hello", "stack", "overflow"],
      items: [1,2,3]
    }
  },
  methods: {
    remove(item) {
      this.chips.splice(this.chips.indexOf(item), 1);
      this.chips = [...this.chips];
    }
  }
})

.v-application .primary--text .mdi-menu-down {
color: transparent !important;
}
.mdi-menu-down {
color: transparent !important;
}

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
        <v-combobox
        v-model="chips"
        :items="items"
        chips class="aa"
        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-container>
      </v-main>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</body>
</html>

ohhh, thx! But the functionality of this arrow is also not needed, I just need to add words as tags to the input in order to then get data from there in an array, there is no need to select elements either (1, 2, 3) — hajime4life, Mar 30 '22 at 21:04

How can i delete the default icon in vuetify?

2 Answers2