Почему не отображаются иконки svg?

Проблема с отображением иконок svg в мобильном браузере. Иконки инклудятся через псевдоэлемент:before, свойство background-image. В desktop версиях браузеров "Chrome, FF, Opera, IE, Edge" проблем с отображением нет! Проблемы возникают на мобильных устройствах, преимущественно на устройствах Xiaomi (во всех браузерах), причем, отображаются они через раз "один раз подгрузились, обновляешь страницу уже не отображаются". На устройствах Samsung, iPhone такого не замечали. Не знаю в чем проблема. Тело svg:

<svg height="50px" viewBox="0 -24 512 512" width="50px" xmlns="http://www.w3.org/2000/svg"><path d="m512 0-512 217.628906 134.222656 53.269532 47.78125 179.605468 87.980469-85.246094 143.132813 98.855469zm-323.023438 293.921875-6.972656 156.582031-18.035156-184.34375 348.03125-266.160156zm0 0" fill="#00d7df"/><path d="m512 0-323.023438 293.921875-6.972656 156.582031 87.980469-85.246094 143.132813 98.855469zm0 0" fill="#00aadf"/></svg>