.menu-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.menu-icon-home {
    mask-image: url("../images/icons/home.svg");
    -webkit-mask-image: url("../images/icons/home.svg");
}
.menu-icon-worklist {
    mask-image: url("../images/icons/wrench.svg");
    -webkit-mask-image: url("../images/icons/wrench.svg");
}
.menu-icon-support {
    mask-image: url("../images/icons/support.svg");
    -webkit-mask-image: url("../images/icons/support.svg");
}

.menu-icon-products {
    mask-image: url("../images/icons/products.svg");
    -webkit-mask-image: url("../images/icons/products.svg");
}

.menu-icon-user-profile {
    mask-image: url("../images/icons/user-profile.svg");
    -webkit-mask-image: url("../images/icons/user-profile.svg");
}

.icon-logo {
    display: flex;
    height: 20px;
    width: 120px;
    opacity: 0.7;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../images/icons/logo-monochrome.svg");
    -webkit-mask-image: url("../images/icons/logo-monochrome.svg");
}