Как изменить цвет SVG на элементе псевдокласса при наведении?

Question

Я пытаюсь изменить цвет SVG при наведении курсора.У меня неупорядоченный список, вставленный динамически в Drupal 8. Я смог добавить различные SVG для каждого отдельного тега привязки с помощью псевдо-класса: before и background-image.Однако теперь мне нужно изменить цвет SVG на белый при наведении.Есть идеи как решить это?

Я попытался изменить курсор при помощи css и не могу изменить цвет.Я попытался получить доступ через javascript и изменить свойство fill / color / stroke, но я тоже не смог этого сделать.

HTML-разметка:

<ul>
    <li>
      <a href="" data-drupal-link-system-path="<front>">Menu Link 1</a>
    </li>
    <li>
    <a href="" data-drupal-link-system-path="<front>">Menu Link 2</a>                                   <ul>
    <li>
    <a href="" data-drupal-link-system-path="<front>">Submenu-sidebar 1</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Submenu-sidebar 2</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Submenu-sidebar 3</a>
    </li>
    </ul>

    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 3</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 4</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 5</a>
    </li>
</ul>

ul {
            border: none;
            -webkit-box-shadow: 1px 0px 9px 0 rgba(0,0,0,0.75);
            -moz-box-shadow: 1px 0px 9px 0 rgba(0,0,0,0.75);
            box-shadow: 1px 0px 9px 0 rgba(0,0,0,0.75);
            list-style: none;
            padding: 0;
            margin: 0;
            width: rem(280px);
            li {
                /* Insert SVGs in anchor tags */
                &:nth-child(1) a:before {
                    @extend %svg-sidebar-decorations;
                    background-image: url("../images/picto-info-sant.svg");
                }
                &:nth-child(2) a:before {
                    @extend %svg-sidebar-decorations;
                    background-image: url("../images/picto-info-social.svg");
                }
                &:nth-child(3) a:before {
                    @extend %svg-sidebar-decorations;
                    background-image: url("../images/picto-signalement.svg");
                }
                &:nth-child(4) a:before {
                    @extend %svg-sidebar-decorations;
                    background-image: url("../images/picto-urgence.svg");
                }
                &:nth-child(5) a:before {
                    @extend %svg-sidebar-decorations;
                    background-image: url("../images/picto-antipoison.svg");
                }

%svg-sidebar-decorations {
    content: '';
    display: inline-block;
    width: rem(14px);
    height: rem(16px);
    margin-top: rem(3);
    margin-right: rem(10px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Мне нужно изменить цвет SVG с синего на белый при наведении курсора li