Blank Icon in Vuetify 3

Question

How can I create a blank icon to use as a spacing placeholder?

For example, I want to align the languages in this menu:

    <v-list>
      <v-list-item v-for="(item) in languages" :key="item.id" @click="() => { currentLanguage = item.id }">            
        <v-list-item-title>
          <v-icon v-if="item.id === currentLanguage">mdi-check</v-icon>          
          &nbsp;
          {{ item.name }}
        </v-list-item-title>
      </v-list-item>
    </v-list>

In the example, I want all the languages are that not the current language to be indented by exactly the width of the check icon, in effect I want a blank icon to push the text across by the correct amount.

Answer 1

You could leave the icon here and toggle a CSS property: visibility: none.

Otherwise, apply an exact margin left to your text.