.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-user {
    mask-image: url("../images/account/user.svg");
    -webkit-mask-image: url("../images/account/user.svg");
}

.menu-icon-logout {
    mask-image: url("../images/account/log-out.svg");
    -webkit-mask-image: url("../images/account/log-out.svg");
}

.menu-icon-password {
    mask-image: url("../images/account/manage-password.svg");
    -webkit-mask-image: url("../images/account/manage-password.svg");
}

.add {    
    mask-image: url("../images/add.svg");
    -webkit-mask-image: url("../images/add.svg");
}

.delete {
    mask-image: url("../images/delete.svg");
    -webkit-mask-image: url("../images/delete.svg");
}

.pencil {
    mask-image: url("../images/pencil.svg");
    -webkit-mask-image: url("../images/pencil.svg");
}

.trash {
    mask-image: url("../images/trash.svg");
    -webkit-mask-image: url("../images/trash.svg");
}

.checkmark {
    mask-image: url("../images/checkmark.svg");
    -webkit-mask-image: url("../images/checkmark.svg");
}

.stop {
    mask-image: url("../images/stop.svg");
    -webkit-mask-image: url("../images/stop.svg");
}