CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
beginner_
beginner_

Reputation: 31

Vuetify creating v-icon dynamically

I want to create v-icon dynamically with javascript. So this is my code:

const icon = document.createElement('v-icon');
icon.innerHTML = 'folder_open';

However it doesn't work. It only shows a text instead of v-icon. How can I do it?

Upvotes: 1

Views: 3578

Answers (1)

Jns
Jns

Reputation: 3257

v-icon is not a valid html element. The v-icon component will be translated into an html valid i-tag with an specific class. Vuetify icons utilize Google's Material Icons font library. So to create an pseudo v-icon element dynamically you have to create an i element and assign material-icons icon as classes to it. Finally you add the name of the icon to the inner html as you already did.

Example:

const icon = document.createElement('i');
icon.className = "material-icons icon";
icon.innerHTML = "folder_open";
var main = document.getElementById('main');
main.appendChild(icon);

Fiddle: https://jsfiddle.net/mqyxbg1k/

Upvotes: 4

Related Questions