How to insert material icon directly into svg element in vue

user_856355 0
Viewed 1137

I have a svg element, and I would like to insert a material icon inside.

Like How do I include a font awesome icon in my svg? but in Vue with material icons

That code doesn't work

html:

<svg >
  <circle class="background" cx="50%" cy="50%" r=100></circle>
  <text class="icon" x="50%" y="50%" >dashboard</text>
</svg>

and css:

.icon {
  font-family: "Material Icons";
}

but that code outside from svg element works:

<div style="font-family: Material Icons;">settings</div>
vue-material svg css html
2 Answers

have you tried inside your .svg? I still had to include the material icons link in the head of the html doc that used it, but it did just finally now work for me.

    <foreignObject x="0" y="0" width="20" height="20">
        <div style="font-family: Material Icons;">settings</div>
    </foreignObject>
user_15236240

This might be happening because the style sheet is not loaded first, before the SVG? If that's the case, using

style="font-family: Material Icons;

Should just work on the text element.

If the CSS is loaded before, I think that this answer might be able to provide you with some insight: https://stackoverflow.com/a/30229965/2523968

user_25239680
Related