How to insert material icon directly into svg element in vue

Question

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>

Please try `` and in CSS use `.background{fill:none; stroke:black;}` Let me know if this is what you need. — enxaneta, Jun 22 '19 at 10:58
It makes me an empty item with background. I've already try that but I have removed for the post to provide clearer example. — lgm42, Jun 24 '19 at 08:19

score 0 · Answer 1 · answered Jun 10 '21 at 17:17

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>

How to insert material icon directly into svg element in vue

1 Answers1