Steps for utilizing a variable as the icon in the <el-button> tag

I am currently utilizing the Element-Ui library for my project's frontend, but I have found that its icon library is quite limited. Due to this constraint, I have decided to use Material Design Icons instead. My question is how can I make the system recognize the icon stored in a variable within the code snippet below. I attempted a solution similar to the one provided, but it did not yield the desired outcome.

    <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>
javascriptvue.jselement-ui

Answer №1

If you want to solve the installation of this dependency, you need to include "@mdi/font". You can do this by running npm i @mdi/font -D and then declaring it in the button as shown below:

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

Additionally, make sure to configure it in the plugins folder within the vuetify.js file like this:

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

Answer №2

To display the string from svgPath1 in a template, simply use the following code:

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


:icon="svgPath2" 


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

Answer №3

To utilize the el-button without icon props, you can implement it in the following manner:

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

For additional resources, please refer to this vue-material-design-icons

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize jQuery script on every single element

Is there a way to implement a jquery function on elements that are dynamically loaded via ajax? <span class="h">Test</span><br /><br /> <span class="h">Test</span><br /><br /> <span class="h">Test</ ...

javascriptjqueryajaxclick

The body onload function fails to run upon the page loading

I'm having trouble with my body onload function not executing. When I load the page, I want to display all records that are selected in the drop_1 dropdown and equal to ALL. I have a script that sends values q and p to getuser.php. The values sent are ...

javascriptajax

Error message: "Link binding error in knockout collection"

In this example, you'll find my Knockout ViewModel. $(document).ready( function () { var Incident = function (CaseNumber, DateOfIncident, Description) { this.CaseNumber = CaseNumber; this.DateOfIncident = DateOfIn ...

javascripthtmlmvvmknockout.js

Encountering issues with the setValue function in Nightwatch

Currently, I am in the process of setting up a new Nightwatch project to automate a basic Google search page. The assertion for searchbox present on page is successful, but I am facing difficulties performing any mouse or keyboard actions on the elements ( ...

javascriptseleniumnightwatch.js

Having difficulty updating the parent for all PortfolioItem/Feature that were copied for a specific PortfolioItem/MMF

I'm facing a challenge in setting the parent for multiple features that I've copied for a specific MMF. However, only the parent of the last feature is being set. Below is the code snippet responsible for setting the parent: Record represents th ...

javascriptextjsextjs4rally

Styling background images with jQuery

Issue with Implementing jQuery Background Image Swapper and CSS Styling html { background: url(images/image_1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; b ...

javascriptjqueryhtmlcss

Steps for deploying a MEVN stack application on Heroku

Using Vue for the front end and Express + Mongo for the back end, I've created a minimalist notes manager application. The server and client components are housed in distinct folders, each with their own package.json file. ...

node.jsmongodbexpressvue.jsheroku

Error: The default export is not a component compatible with React in the specified page: "/"

I'm facing an issue while building my next app. Despite using export default, I keep encountering an error that others have mentioned as well. My aim is to create a wrapper for my pages in order to incorporate elements like navigation and footer. vi ...

javascriptreactjstypescriptnext.jseslint

Display the data returned from a computed property PromiseResult using VueJS

After calculating the property shown below, it will output res, which is a Promise object. The reason I cannot place this script inside the created() or mounted() hook is due to the fact that this.selectedObject is null at that time. I am satisfied with t ...

javascriptvue.jspromisecomputed-properties

I'm looking to filter this array based on the value of a subarray that the user will specify the key and value for. How can I accomplish

Given the input var key="value_0" and var input="hello", I need to filter the array in TypeScript based on these values. The filtering criteria involve checking if the array elements contain a subarray with key="value_0" and if the value of this key includ ...

javascriptarraystypescript

Error encountered in App.js on line 29: Unable to access the property 'map' as it is undefined

Currently enrolled in the University of Helsinki Full Stack Open course, I am facing a challenging error while working on my React web app. The app retrieves data from the Rest Countries API (https://github.com/apilayer/restcountries) and I am trying to di ...

javascriptreactjs

Send the content written in summernote to an AJAX request

I'm having trouble with ajax and javascript, so I need to ask for assistance. Within a form, I have an editor (using summernote editor). <div id="summernote">summernote text</div> After that, I use this ajax function to send the form dat ...

javascriptphpajax

Upon refreshing the page, the newly added task does not seem to be saved

Currently, I am in the process of putting together a to-do list for my upcoming exam. However, I seem to be encountering an issue where the page keeps reloading every time I try to add a task, and unfortunately, the tasks are not being recorded. As someone ...

vue.js

Error message: Unable to locate module when using a variable to import an image in React

I've encountered an issue with my React code that I can't seem to figure out. I am integrating the Accuweather API and trying to display the weather icon on my app. Initially, everything seemed to be working fine as I constructed the image path l ...

javascriptreactjscreate-react-app

Downloading a zip file using PHP works successfully when initiated directly, but encounters errors when attempted through a web application

I have been working on a PHP script that generates a zip file and allows it to be downloaded from the browser. The download function in the code snippet below: download.php // ensure client receives download if (headers_sent()) { echo 'HTTP head ...

javascriptphpajaxpostdownload

Trigger a simulated click on an element using code when the Enter key is pressed in an input field

Here is the HTML code snippet: <div class="container"> <div class="row d-none d-md-block d-xl-none" id="PrescriptionTitle"> <div class="col-sm-6"> <span for="" class="text-left">Brand Name</span> < ...

javascriptjquerybootstrap-4

An unhandled error has occurred, please address

While developing a multiplayer survival game, I encountered an issue with nested message component collectors causing the innermost collector to fail. To resolve this, I implemented a promise that would be resolved once the outermost collector ends. Howeve ...

javascriptnode.jserror-handlingdiscorddiscord.js

What is the best way to implement a callback in iOS with JavaScript?

Attempting to utilize a native function in Swift from wkwebview has been tough. Here's the progress I've made so far: Swift Part override func viewDidLoad() { super.viewDidLoad() // Additional setup after loading the view. conte ...

javascriptiosswiftwkwebview

Exploring the process of generating, monitoring, and initiating personalized events in ReactJS

To establish a global custom event for listening and triggering purposes, here is how it can be achieved using jQuery: $(document).on('myCustomEvent', function(){ console.log("myCustomEvent triggered"); }) $(document).trigger('myCustom ...

javascriptreactjseventsevent-handlingjquery-events

Error in Vuepress: Attempting to read properties that are not defined (specifically 'match')

I encountered an error while attempting to build my vuepress project. I followed this npm quickstart guide: After adding some pages, everything was functioning correctly with: npm run:dev However, when I tried to generate html to docs/src/.vuepress using ...

vue.jsnpmvuepress