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

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

/* pages */
.icon-chart {
    --icon-mask-image: url("/images/pages/data-pie.svg");
}
.icon-counter {
    --icon-mask-image: url("/images/pages/counter.svg");
}
.icon-home {
    --icon-mask-image: url("/images/pages/home.svg");
}
.icon-pdf-viewer {
    --icon-mask-image: url("/images/pages/document-pdf.svg");
}
.icon-pivot-table {
    --icon-mask-image: url("/images/pages/pivot-table.svg");
}
.icon-report-designer {
    --icon-mask-image: url("/images/pages/document-data-edit.svg");
}
.icon-rich-edit {
    --icon-mask-image: url("/images/pages/text-description-edit.svg");
}
.icon-tree-list {
    --icon-mask-image: url("/images/pages/list-bar-tree.svg");
}
.icon-weather {
    --icon-mask-image: url("/images/pages/weather.svg");
}

.menu-icon {
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
    min-width: var(--dxbl-icon-width);
    min-height: var(--dxbl-icon-height);
    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: var(--dxbl-icon-home);
    -webkit-mask-image: var(--dxbl-icon-home);
}

.menu-icon-support {
    mask-image: var(--dxbl-icon-support);
    -webkit-mask-image: var(--dxbl-icon-support);
}