Material Design Icon (MDI) inside SVG graphic?

Question

In my application I need to use the same icon in different places.

1. in v-card-action's button
2. in a SVG graphic

For the button it is as explained in vuetify documentation:

<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>

But now, how to use the exact same icon (using it's name) in a custom SVG

<svg viewBox="0 0 100 100">
    <rec x="0" y="0" width="100" height="100" stroke="grey" />
    <???> mdi-arrow-left-circle </???>
</svg> 

• First, do i need to use SVG <img>, <text> or <path> primitive ?
• Second, how do i get the proper icon from it's name mdi-arrow-left-circle ?

Answer 1

I had the exact same question. This link came in handy when putting this together:

How do I include a font awesome icon in my svg?

Disclaimer: I'm using TS components in Vue and have added Vuetify.

in the template I have a SVG:

<svg>
<text
    x="100"
    y="100"
    class="licon"
    fill="red">
    {{ content('mdi-close') }}
</text>
</svg>

The content method does this:

content(cls: string): string {
    // this copies the content from the pseudo element :before as it's needed to show the icon from material design
    const ele = document.querySelector('.' + cls);
    if(ele) {
        const styles = window.getComputedStyle(ele, ':before');
        return styles.content.replaceAll('"', "");
    }

    return '';
}

The last piece needed was to make sure to use the correct font (include in your stylesheet/etc):

.licon {
    font: bold 300px 'Material Design Icons';
}

Hopefully this helps someone else.