如何为 <el-button> 中的图标使用变量

Question

我在我的项目前端使用 Element-Ui 库，但它的图标库非常稀缺，这就是我为此使用 Material Desing Icons 的原因。我如何展示如何让它识别我保存在变量中的图标。我正想做类似的事情，但行不通。

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

Answer 1

我认为你在 el-button 中最不使用图标道具的情况下可以像这样使用代码：

<el-button type="primary">
    Upload
    <YOUR CUSTOM MATERIAL FONT />
</el-button>

请检查这个 vue-material-design-icons

Answer 2

如果您想在模板中显示来自 svgPath1 的字符串，只需写入

<el-button 
class="record-btn" 
v-if="isRecording" 
circle 


:icon="svgPath2" 


@click="AudioRecorded"></el-button>

Answer 3

要解决这个依赖于“@mdi/font”这样的安装：npm i @mdi/font -D 然后在按钮中声明如下：

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

同样在vuetify.js文件中的plugins文件夹中配置如下：

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' 
      },
});

如何为 <el-button> 中的图标使用变量

how to use a variable for the icon in <el-button>

javascript

vue.js

element-ui