Dynamically resolve icon font code in a SCSS rule

Question

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

Answer 1

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