Как правильно задать бекграунд псевдоэелементу SVG картинкой, чтобы по наведению картинка цвет меняла?

[VasyOK{!}]

Приветствую специалистов по верстке!

Подскажите: как правильно задать бекграунд псевдоэелементу SVG картинкой, чтобы по наведению картинка цвет меняла?

Попробовал сделать так:

.main-menu ul li a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-menu ul li a::before {
    width: 18px;
    height: 18px;
    content: '';
    background: #828282;
    display: block;
    mask-repeat: no-repeat;
    mask-position: center;
    margin: 0 0 3px 0;
}
.main-menu ul li a.active::before,
.main-menu ul li a:hover::before {
    background: var(--clr1);
}
.main-menu .reit a::before {
    mask-image: url('../images/main_menu/reit.svg');
}
.main-menu .orders a::before {
    mask-image: url('../images/main_menu/orders.svg');
}

Результат нормально работает только в Firefox:

В Crome плохо:

Сайт http://u14038.malleus.vps-private.net

Edited January 1, 2020 by VasyOK{!}

[VasyOK{!}]

Если использую "-webkit", начинает работать в Chrome:

.main-menu ul li a::before {
    width: 18px;
    height: 18px;
    content: '';
    background: #828282;
    display: block;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    margin: 0 0 3px 0;
}

.main-menu ul li a.active::before,
.main-menu ul li a:hover::before {
    background: var(--clr1);
}

.main-menu .reit a::before {
    mask-image: url('../images/main_menu/reit.svg');
    -webkit-mask-image: url('../images/main_menu/reit.svg');
}

Но в Edge не все гладко ("заказы, мастерам"):

mask-repeat: no-repeat; - не работает в Edge?

Оно то решаемо, если задать ширину и высоту для каждого псевдоэлемна, но код какой-то страшный получается. Может я что-то неправильно делаю?