Raw svg doesn't seem to work in internet explorer

[Kansuler]

Vue Version: 2.3.0
Vue-awesome Version: 2.3.0

It seems like if you register a raw svg it doesn't work in Internet Explorer 11 and below, not sure about Edge.

Icon.register({
sweden: {
      width: 300,
      height: 150,
      raw: '<rect width="300" height="150" fill="#006aa7"></rect><rect width="30" height="150" x="100" fill="#fecc00"></rect><rect width="300" height="30" y="60" fill="#fecc00"></rect>'
    }
})

In <IE11 the paths will be empty, while in Chrome and Firefox it works fine.
IE:

<svg xmlns="http://www.w3.org/2000/svg" class="flag-icon fa-icon" role="presentation" viewBox="0 0 300 150" width="16" height="8" data-v-4d200f48="" version="1.1">
    <g />
</svg>

Chrome:

<svg data-v-4d200f48="" version="1.1" role="presentation" width="16" height="8" viewBox="0 0 300 150" class="flag-icon fa-icon">
    <g>
        <rect width="300" height="150" fill="#006aa7"></rect><rect width="30" height="150" x="100" fill="#fecc00"></rect><rect width="300" height="30" y="60" fill="#fecc00"></rect>
    </g>
</svg>

If I with the DOM explorer parse the paths right into the element it displays correctly.

[Justineo]

It seemed that it's not supported to use v-html in SVG elements (see vuejs/vue#5310). We might have to reconsider this feature (maybe we should remove raw mode?).

[Kansuler]

Ah, so that's the reason why. I believe that this still is a good feature to have. I found a solution that uses innersvg-polyfill and just make an import statement with it. That solved the issue!

[Kansuler]

Maybe it would be possible to include innersvg-polyfill in case the raw method is used?

[Justineo]

I don't think it's a good practice to include a polyfill in a component. Maybe users should include the polyfill themselves if they decide to use raw feature and we can clarify that in the docs.

[Justineo]

The need of polyfill is already documented in README. So closing this.