.icon {
    width: 1rem;
    height: 1rem;
    background-color: currentcolor;
    mask-image: var(--icon-mask-image);
    mask-position: center;
    mask-repeat: no-repeat;
}

.icon-image {
    width: 1rem;
    height: 1rem;
    background-image: var(--icon-background-image);
    background-position: center;
    background-repeat: no-repeat;
}

.icon-back {
    --icon-mask-image: url("/img/back.svg");
}
.icon-close {
    --icon-mask-image: url("/img/close.svg");
}
.icon-demos {
    --icon-mask-image: url("/img/demos.svg");
}
.icon-docs {
    --icon-mask-image: url("/img/doc.svg");
}
.icon-menu {
    --icon-mask-image: url("/img/menu.svg");
}

/* pages */
.icon-chart {
    --icon-mask-image: url("/img/pages/data-pie.svg");
}
.icon-counter {
    --icon-mask-image: url("/img/pages/counter.svg");
}
.icon-home {
    --icon-mask-image: url("/img/pages/home.svg");
}
.icon-pdf-viewer {
    --icon-mask-image: url("/img/pages/document-pdf.svg");
}
.icon-pivot-table {
    --icon-mask-image: url("/img/pages/pivot-table.svg");
}
.icon-report-designer {
    --icon-mask-image: url("/img/pages/document-data-edit.svg");
}
.icon-report-viewer {
    --icon-mask-image: url("/img/pages/document-data.svg");
}
.icon-rich-edit {
    --icon-mask-image: url("/img/pages/text-description-edit.svg");
}
.icon-scheduler {
    --icon-mask-image: url("/img/pages/calendar.svg");
}
.icon-tree-list {
    --icon-mask-image: url("/img/pages/list-bar-tree.svg");
}
.icon-editable-grid {
    --icon-mask-image: url("/img/pages/editable-grid.svg");
}
.icon-master-detail-grid {
    --icon-mask-image: url("/img/pages/master-detail-grid.svg");
}
.icon-basic-form {
    --icon-mask-image: url("/img/pages/basic-form.svg");
}
.icon-weather {
    --icon-mask-image: url("/img/pages/weather.svg");
}

/* account */
.icon-email {
    --icon-mask-image: url("/img/account/manage-email.svg");
}
.icon-external {
    --icon-mask-image: url("/img/account/user.svg");
}
.icon-log-in {
    --icon-mask-image: url("/img/account/log-in.svg");
}
.icon-log-out {
    --icon-mask-image: url("/img/account/log-out.svg");
}
.icon-password {
    --icon-mask-image: url("/img/account/manage-password.svg");
}
.icon-personal {
    --icon-mask-image: url("/img/account/manage-personal.svg");
}
.icon-profile {
    --icon-mask-image: url("/img/account/manage-profile.svg");
}
.icon-settings {
    --icon-mask-image: url("/img/account/settings.svg");
}
.icon-two-factor {
    --icon-mask-image: url("/img/account/manage-two-factor.svg");
}
.icon-user {
    --icon-mask-image: url("/img/account/user.svg");
}

/* account/providers */
.icon-facebook {
    --icon-background-image: url("/img/account/providers/facebook-logo.svg");
}
.icon-google {
    --icon-background-image: url("/img/account/providers/google-logo.svg");
}
.icon-microsoft {
    --icon-background-image: url("/img/account/providers/microsoft-logo.svg");
}
.icon-twitter {
    --icon-background-image: url("/img/account/providers/x-logo.svg");
}