如何将材质图标直接插入Vue中的SVG元素

Question

我有一个svg元素，我想在其中插入一个材质图标。

像 How do I include a font awesome icon in my svg? 但在Vue中带有实质图标

该代码不起作用

html：

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

和CSS：

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

但是svg元素之外的代码有效：

<div style="font-family: Material Icons;">settings</div>

Answer 1

你在你的 .svg 中试过吗？我仍然需要在使用它的 html 文档的头部包含材质图标链接，但它现在终于对我有用了。

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