body {
  --dxbl-icon-back: url("../images/icons/arrow-left.svg");
  --dxbl-icon-close: url("../images/icons/blazor/close.svg");
  --dxbl-icon-copy: url("../images/icons/blazor/copy.svg");
  --dxbl-icon-drop-file: url("../images/icons/blazor/drop-file.svg");
  --dxbl-icon-edit: url("../images/icons/edit.svg");
  --dxbl-icon-save: url("../images/icons/blazor/save.svg");
  --dxbl-icon-download: url("../images/icons/blazor/download.svg");
  --dxbl-icon-column-chooser: url("../images/icons/blazor/column-chooser.svg");
  --dxbl-icon-refresh: url("../images/icons/blazor/refresh.svg");
  --dxbl-icon-pinned: url("../images/icons/lock-closed.svg");
  --dxbl-icon-unpinned: url("../images/icons/lock-open.svg");
  --dxbl-icon-add: url("../images/icons/add.svg");
  --dxbl-icon-export: url("../images/icons/blazor/export.svg");
  --dxbl-icon-grid-toolbar-edit: url("../images/icons/blazor/grid-toolbar-edit.svg");
}

.icon,
.dxbl-image.icon {
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: currentColor;
  width: 1rem;
  height: 1rem;
  display: inline-block;
}

  .icon.right {
    top: 0.3rem;
    right: 0.3rem;
  }

  .icon.overlay {
    position:absolute;
  }

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

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

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

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

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

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

  .icon.column-chooser-icon {
    -webkit-mask-image: var(--dxbl-icon-column-chooser);
    mask-image: var(--dxbl-icon-column-chooser);
  }

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

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

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

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

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

  .icon.grid-toolbar-edit-icon {
    -webkit-mask-image: var(--dxbl-icon-grid-toolbar-edit);
    mask-image: var(--dxbl-icon-grid-toolbar-edit);
  }

/*.toolbar-icon {
  filter: brightness(0) saturate(100%);*/ /* optional: für konsistente Farbe */
/*transition: filter 0.2s ease;
  cursor: pointer;
  opacity: 0.7;
}

  .toolbar-icon:hover {
    filter: brightness(0) saturate(100%) invert(37%) sepia(98%) saturate(397%) hue-rotate(180deg) brightness(95%) contrast(92%);
  }*/