2

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>
lgm42
  • 591
  • 1
  • 6
  • 29
  • Please try ` dashboard ` 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

2 Answers2

0

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>
Joshua Eric Turcotte
  • 405
  • 5
  • 10
  • I couldn't get text displayed on my SVG with foreignObject for some reason. I used the inline styling to get this to work `currentText.attr('style', "font-family: Material Icons;"); currentText.text('flag');` – Newteq Developer Jun 28 '22 at 19:15
0

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

Newteq Developer
  • 2,257
  • 1
  • 26
  • 32