vue-material 不适用于带有自定义 svg 图标的 md-src答案

【问题标题】：vue-material not work md-src with custom svg iconvue-material 不适用于带有自定义 svg 图标的 md-src
【发布时间】：2019-04-21 06:09:13
【问题描述】：

我使用vue-cli 生成一个项目，然后运行vue add vue-material。然后我添加 MdButton 并在浏览器中检查

// work
<md-button class="md-icon-button">button</md-button>

然后我添加 MdIcon 并在浏览器中检查

// not work
<md-button class="md-icon-button">
    <md-icon md-src="/assets/icons/svg/telegram.svg"></md-icon>
</md-button>

编译成功，但是浏览器出现错误

未捕获（承诺）文件 /assets/icons/svg/telegram.svg 不是有效的 SVG。

svg 绝对有效！如何解决？

【问题讨论】：

【解决方案1】：

我最近遇到了这个；正如莱昂纳多所说，这是由于新添加的 MIME 类型检查。出于某种原因，我的 SVG 文件被 Content-Type: text/html 提供。

为了修复它，我不得不更改我的图标以使用require，这（如果我理解正确的话）会导致它通过 Webpack 中的另一个加载器来修复 MIME 类型。（有关更多信息，请参阅here。）使用 OP 的示例，我会更改：

<md-icon md-src="/assets/icons/svg/telegram.svg" />

到

<md-icon :md-src="require('/assets/icons/svg/telegram.svg')" />

【讨论】：

【解决方案2】：

【讨论】：