Значок дизайна материалов (MDI) внутри графики SVG?

#svg #icons #vuetify.js #mdi

Вопрос:

В моем приложении мне нужно использовать один и тот же значок в разных местах.

  1. в v-карточке-кнопка действия
  2. на графике SVG

Для кнопки это так, как описано в документации vuetify:

 <v-card-actions>
    <v-btn value="previous" color="red" >
        <span class="hidden-sm-and-down">Previous</span>
        <v-icon right>mdi-arrow-left-circle</v-icon>
    </v-btn>
</v-card-actions>
 

Но теперь, как использовать точно такой же значок (используя его имя) в пользовательском SVG

 <svg viewBox="0 0 100 100">
    <rec x="0" y="0" width="100" height="100" stroke="grey" />
    <???> mdi-arrow-left-circle </???>
</svg> 
 
  • Во-первых, нужно ли мне использовать SVG <img> <text> или <path> примитивный ?
  • Во-вторых, как мне получить правильный значок из его имени mdi-стрелка-левый круг ?