vue-material not work md-src with custom svg icon

Question

I generate a project using vue-cli and then run vue add vue-material. Then I add MdButton and check in the browser

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

Then I add MdIcon and check in the browser

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

The compilation succeeds, but an error appears in the browser

Uncaught (in promise) The file /assets/icons/svg/telegram.svg is not a valid SVG.

svg is definitely valid! How to fix?

Answer 1

It seems an issue created because a mime type. https://github.com/vuematerial/vue-material/pull/1942/commits/74c45f2150e7fc978e536dbc03549d0e8abff47c

Answer 2

I ran into this recently; as Leonardo mentioned it was due to the newly-added MIME type check. For some reason, my SVG file was being served up with Content-Type: text/html.

To fix it, I had to change my icons to use require, which (if I understand correctly) causes it to go through a different loader in Webpack which fixes the MIME type. (See here for a bit more info.) Using OP's example, I would change:

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

to

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