Single icon is not shown in chrome when using inline svg

254 Views Asked by At

I am using inline svg like this

<use xlink:href=""></use>

but for some reason one particular icon is not shown in Chrome (but it's shown in Firefox and ios Safari), other icons are visible in Chrome.

Here's icon itself (it is exported from icomoon)

<symbol id="icon-phone" viewBox="0 0 32 32"> <title>phone</title> <path d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path> </symbol>

I've also tried to use just href instead of xlink:href, but it didn't work either.

1

There are 1 best solutions below

0
On
<symbol id="icon-phone" viewBox="0 0 32 32">

and

</symbol>

wrapper and replace it with

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">

and

</svg>