SVG спрайт в атрибуте содержимого CSS

Question

У меня есть заданный svg-sprite:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <symbol id="envelope" viewBox="0 0 512 512">
      <path d="M502.3 190.8c3.9-3.1 ...."></path>
   </symbol>
   <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" id="menu-2">
     <path d="M0 3h50v2H0zm0 14h50v2H0zm0 14h50v2H0zm0 14h50v2H0z"></path>
   </symbol>
</svg>

Теперь я хотел бы добавить второй символ (menu-2) в ": after" mydiv

mydiv:after {
   content: url("somehow add menu-2 from svg sprite");
}

Как я могу ссылаться на него?

Answer 1

mydiv:after {
   content: url(http://server/sprite.svg#menu-2);
}

где -

http://server путь к серверу или папке, в которой хранится svg-файл
#menu-2 - вызываемая часть спрайта