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