如何将材质图标直接插入vue中的svg元素答案

【问题标题】：How to insert material icon directly into svg element in vue如何将材质图标直接插入vue中的svg元素
【发布时间】：2019-11-04 22:06:36
【问题描述】：

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

该代码不起作用

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>

【问题讨论】：

请尝试<svg viewBox ="0 0 200 200" width="200"> <circle class="background" cx="50%" cy="50%" r=100></circle> <text class="icon" x="50%" y="50%" >dashboard</text> </svg> 并在CSS 中使用.background{fill:none; stroke:black;} 如果这是您需要的，请告诉我。
它使我成为一个有背景的空项目。我已经尝试过了，但我已经删除了帖子以提供更清晰的示例。

【解决方案1】：

您是否尝试过在您的 .svg 中使用？我仍然必须在使用它的 html 文档的头部包含材料图标链接，但它现在终于为我工作了。

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

【讨论】：