0

I am using Nuxt.js (https://nuxtjs.org/), Vuetify.js (https://vuetifyjs.com/) and @mdi/font (https://materialdesignicons.com/) icon font.

I have a case where I want to use an icon, but not the normal way as I normally do in HTML, e.g.

<v-icon>
  mdi-check
</v-icon>

but I want to use mdi-check in a SCSS rule (no icon-related html code), so I guess that what I need is dynamically resolving its content code, e.g.

&:before {
  font-family: Material Design Icons;
  content: 'here I need to dynamically access the code of the "mdi-check" icon, which is "\F012C"';
}

it is important to me not having to put the static code (\F012C), because it may change in the future, but I would like to find a way to dynamically resolve it.

Any idea?

Thanks

Frank
  • 2,083
  • 8
  • 34
  • 52

1 Answers1

0

do like this.

<v-icon data-icon="\F012C">
  mdi-check
</v-icon>

then in css

&:before {
  font-family: Material Design Icons;
  content: attr(data-icon);
}

Let me know if this does not work.

Thanks

Piyush Jain
  • 1,895
  • 3
  • 19
  • 40
  • thank you, but I knew about that and in my case I dont want to use the custom html, I just need the SCSS rule :(. Just because I don't want to rely on the static icon code value and want to use that icon without knowing its code. – Frank Mar 21 '20 at 13:03