1

While my Autocomplete component is loading, there is a moment where the dropdown arrow is rendered as text "arrow_drop_down". This is what the generated HTML is:

<div class="v-input__append-inner">
  <div class="v-input__icon v-input__icon--append">
    <i aria-hidden="true" class="v-ico material-ico">arrow_drop_down</i>       
  </div>
</div>

Is there a way to prevent this? It's not simple to apply CSS styles, because once the arrow icon is available, it is styled the same way. So, using font-size: 0 makes the icon also disappear, for instance.

My actual source that generates the above is:

       <v-autocomplete
            v-model="suburb"

            :items="suburbs"
            :label="'Start typing your suburb name'"
            :filter="customFilter"

            persistent-hint
            prepend-icon="mdi-city"
          >
      </v-autocomplete>
Steve Bennett
  • 114,604
  • 39
  • 168
  • 219
  • This might be related: https://stackoverflow.com/questions/4712242/wait-for-fonts-to-load-before-rendering-web-page – Traxo Aug 03 '18 at 10:53

0 Answers0