.icon-system {
    background-size: contain;
    display: inline-block;
    width: 22px;
    height: 22px;
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: #000;
}

.icon-system.home {
    --icon: url(/icons/dashboard.svg);
}

.icon-system.merchant {
    --icon: url(/icons/merchant.svg);
}

.icon-system.settings {
    --icon: url(/icons/settings.svg);
}

.icon-system.transaction {
    --icon: url(/icons/transaction.svg);
}

.icon-system.settle {
    --icon: url(/icons/settle.svg);
}
.icon-system.disputes {
    --icon: url(/icons/disputes.svg);
}
.icon-system.search-icon {
    --icon: url(/icons/search-icon.svg);
}
.icon-system.transactions {
    --icon: url(/icons/transactions.svg);
}