Material Design Icons (JS SVG) Vuetify.js - append-icon not displaying using mdiSvg

Question

I can't get the append-icon to display on Android, when using PhoneGap to produce an APK from my dist.zip folder. At first, it wouldn't display icons at all then I switched over to mdiSvg as per the link (https://vuetifyjs.com/en/customization/icons/#install-material-design-icons-js-svg). After that, the v-icon started displaying when I inserted the {{ mdiClose }} and specifying the mdiClose iconfont and importing it in my .vue file.

I have tried mdi-eye, mdiEye also but no luck.

        <v-icon color="primary">{{ mdiClose }}</v-icon>
        <v-text-field
          v-model="$v.password.$model"
          :error-messages="passwordErrors"
          label="Password"
          :type="showPassword ? 'text' : 'password'"
          required
          :append-icon="showPassword ? 'visibility' : 'visibility_off'"
          @click:append="showPassword = !showPassword"
        ></v-text-field>

Answer 1

visibility and visibility_off are not material design icons. Use eye and eye-off instead.

It works for me like this:

import {mdiClose,mdiEye,mdiEyeOff} from '@mdi/js';
...
data:()=>({
  svgClose:mdiClose,
  svgEye:mdiEye,
  svgEyeOff:mdiEyeOff
})

in your vue file:

<v-icon color="primary">{{ svgClose }}</v-icon>
<v-text-field
  v-model="$v.password.$model"
  :error-messages="passwordErrors"
  label="Password"
  :type="showPassword ? 'text' : 'password'"
  required
  :append-icon="showPassword ? 'svgEye' : 'svgEyeOff'"
  @click:append="showPassword = !showPassword"
></v-text-field>