Estoy usando la biblioteca Element-Ui para la interfaz de mi proyecto, pero la biblioteca de íconos es muy escasa, por eso uso Material Design Icons para esto. ¿Cómo podría mostrar cómo hacer que reconozca el icono que guardo en una variable? Estaba pensando en hacer algo así pero no funciona.
<template> <el-button class="record-btn" v-if="isRecording" circle icon=svgPath2 @click="AudioRecorded"></el-button> <el-button class="record-btn" v-else circle icon="svgPath1" @click="AudioRecorded" ></el-button> </template> <script> import { mdiStop, mdiRecordRec } from '@mdi/js'; export default { data () { return { svgPath1: mdiRecordRec, svgPath2: mdiStop, isRecording: false, } }, } </script>Si desea mostrar una cadena de svgPath1 en la plantilla, simplemente escriba
<el-button class="record-btn" v-if="isRecording" circle :icon="svgPath2" @click="AudioRecorded"></el-button>Para resolver la instalación, esto depende de "@mdi/font" así: npm i @mdi/font -D y luego en el botón declararlo de la siguiente manera:
<template> <el-button id="record-btn" v-if="isRecording" circle icon='mdi mdi-stop' @click="AudioRecorded"></el-button> <el-button id="record-btn" v-else circle icon='mdi mdi-record-rec' @click="AudioRecorded"></el-button> </template>configure también en la carpeta de complementos en el archivo vuetify.js de la siguiente manera:
import Vue from 'vue'; import Vuetify from 'vuetify/lib/framework'; import 'material-design-icons-iconfont/dist/material-design-icons.css' Vue.use(Vuetify); export default new Vuetify({ icons: { iconfont: 'mdi' }, });Creo que la mayoría de los usos sin accesorios de íconos en el uso del botón pueden usar este código:
<el-button type="primary"> Upload <YOUR CUSTOM MATERIAL FONT /> </el-button>por favor revise este vue-material-design-icons