如何在 <el-button> 中为图标使用变量答案

【问题标题】：how to use a variable for the icon in <el-button>如何在 <el-button> 中为图标使用变量
【发布时间】：2021-12-22 17:47:54
【问题描述】：

我在项目的前端使用 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>

【问题讨论】：

标签： javascript vue.js element-ui

【解决方案1】：

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

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


:icon="svgPath2" 


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

【讨论】：

【解决方案2】：

要解决安装，这取决于“@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' 
      },
});

【讨论】：

【解决方案3】：

我认为你在 el-button 使用中大多数使用没有图标道具的可以使用这样的代码：

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

请查看vue-material-design-icons

【讨论】：