Vue-материал не работает MD-SRC с пользовательским значком SVG

Question

Я создаю проект, используя 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>

Компиляция завершается успешно, но в браузере появляется ошибка

Uncaught (в обещании) Файл /assets/icons/svg/telegram.svg не является допустимым SVG.

svg определенно действителен!Как исправить?

Answer 1

Я столкнулся с этим недавно; как упомянул Леонардо, это произошло из-за недавно добавленной проверки типа MIME. По какой-то причине мой SVG-файл обслуживается с Content-Type: text/html.

Чтобы исправить это, мне пришлось изменить свои значки на require, что (если я правильно понимаю) заставляет его проходить через другой загрузчик в Webpack, который исправляет тип MIME. (См. здесь для получения дополнительной информации.) Используя пример OP, я бы изменил:

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

до

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

Answer 2

Кажется, проблема возникла из-за типа пантомимы. https://github.com/vuematerial/vue-material/pull/1942/commits/74c45f2150e7fc978e536dbc03549d0e8abff47c