Raw svg doesn't seem to work in internet explorer

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 <svg/> element it displays correctly.

[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.

[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!