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

Question

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>

Answer 1

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