Значок SVG в шаблоне веточки

Я борюсь с иконами SVG. Я создаю меню и для этого мне нужно использовать несколько иконок SVG. Я уже знаю, что если я хочу манипулировать цветом с помощью CSS (например, когда иконка активна / наведите курсор), я должен использовать в HTML <svg> тег не <img src="path-to-icon.svg"/>,
Как я могу решить эту проблему хорошим способом?

Я не хочу использовать полный путь SVG в моем HTML-файле, потому что иногда он имеет сто строк d="..." приписывать. Я стараюсь избегать использования <use xlink:href="path-to-icon.svg" /> также, потому что не поддерживается браузерами IE или Edge.

Я могу добавить, что я использую .twig шаблон, так что, возможно, есть способ добавить иконку в PHP.

HTML:

  <label id="menuIcon" for="menu" onclick="openNav()">
{# svg icon #}
</label>

CSS

.icon:hover path {
fill: green;
}