I have a bunch of HTML text, and in this text I'd like to use a Material design icon. For example:
var htmlText = "<p>Hello world, have an icon: <v-icon small>mdi-alert</v-icon>.</p>
Which in the template we'll code like so:
<div v-html="htmlText"/>
As the v-icon is a vuetify tag, it won't be rendered, so the output will be:
Hello world, have an icon: mdi-alert.
I believe that a possible option might be to use Vue.compile (https://vuejs.org/v2/api/#Vue-compile). However, I don't have just one string but a nested object containing a lot of html strings, so this approach feels a bit cumbersome (and potentially a performance problem?), especially because the only tag I actually need to render is the v-icon.
Since I'm already importing the Vuetify lib, which probably imported a MDI lib somewhere, isn't there another way to display a Material Design icon, without going through v-icon?
What would be a good solution for this?
