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

user_13092093 0
Viewed 829

I am using the Element-Ui library for the frontend of my project but the icon library for it is very scarce that is why I use Material Desing Icons for this. How could I show how to make it recognize the icon that I save in a variable. I was thinking of doing something like that but it doesn't work.

    <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>
element-ui vue.js javascript
3 Answers

If you want to show string from svgPath1 at template just write

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


:icon="svgPath2" 


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

To solve install this depends on "@mdi/font" like this: npm i @mdi/font -D and and then in the button declare it as follows:

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

also configure in the plugins folder in the vuetify.js file as follows:

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

I think you most use without icon props in el-button use can use like this code :

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

please check this vue-material-design-icons

user_114714890
Related