Material Design Icons (JS SVG) Vuetify.js - 使用 mdiSvg 不显示附加图标答案

【问题标题】：Material Design Icons (JS SVG) Vuetify.js - append-icon not displaying using mdiSvgMaterial Design Icons (JS SVG) Vuetify.js - 使用 mdiSvg 不显示附加图标
【发布时间】：2020-11-09 15:20:31
【问题描述】：

当使用 PhoneGap 从我的 dist.zip 文件夹生成 APK 时，我无法在 Android 上显示附加图标。起初，它根本不会显示图标，然后我根据链接 (https://vuetifyjs.com/en/customization/icons/#install-material-design-icons-js-svg) 切换到 mdiSvg。之后，当我插入 {{ mdiClose }} 并指定 mdiClose 图标字体并将其导入我的 .vue 文件时，v-icon 开始显示。

我尝试过 mdi-eye，mdiEye 也试过，但没有成功。

        <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>

【问题讨论】：

标签： android apk vuetify.js phonegap material-design-icons

【解决方案1】：

visibility 和 visibility_off 不是 Material Design 图标。改用眼睛和眼睛离开。

这样对我有用：

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

在你的 vue 文件中：

<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>

【讨论】：