.icon,
.icon-translation,
.icon-more-vert,
.icon-block,
.icon-swap,
.icon-info,
.icon-open-in-new,
.icon-profile,
.icon-delete,
.icon-door-open,
.icon-edit,
.icon-logout,
.icon-available,
.icon-busy,
.icon-away,
.icon-offline,
.icon-disabled
{
  height: 1rem;
  width: 1rem;
  mask-size: 1rem;
  background-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background-position: center center;
  background-color: currentColor;
}

.icon-block {
  -webkit-mask-image: url("../svg/blockBlack.svg");
  mask-image: url("../svg/blockBlack.svg");
}

.icon-translation {
  -webkit-mask-image: url("../svg/translation.svg");
  mask-image: url("../svg/translation.svg");
}

.icon-more-vert {
  -webkit-mask-image: url("../svg/more-vert.svg");
  mask-image: url("../svg/more-vert.svg");
}

.icon-open-in-new {
  -webkit-mask-image: url("../svg/open_in_new.svg");
  mask-image: url("../svg/open_in_new.svg");
}

.icon-info {
  -webkit-mask-image: url("../svg/info.svg");
  mask-image: url("../svg/info.svg");
}

.icon-swap {
  -webkit-mask-image: url("../svg/swap.svg");
  mask-image: url("../svg/swap.svg");
}

.icon-logout {
  -webkit-mask-image: url("../svg/logout.svg");
  mask-image: url("../svg/logout.svg");
}

.icon-profile {
  -webkit-mask-image: url("../svg/profile.svg");
  mask-image: url("../svg/profile.svg");
}

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

.icon-door-open {
  -webkit-mask-image: url("../svg/door_open.svg");
  mask-image: url("../svg/door_open.svg");
}

.icon-edit {
  -webkit-mask-image: url("../svg/edit.svg");
  mask-image: url("../svg/edit.svg");
}

/* user status -> set them as iconURL and as iconcssclass! */

.icon-available,
.icon-busy,
.icon-away,
.icon-offline,
.icon-disabled
{
  background-color: transparent;
}

.icon-available {
  -webkit-background-image: url("../svg/status_available.svg");
  background-image: url("../svg/status_available.svg");
}

.icon-disabled{
  -webkit-background-image: url("../svg/status_disabled.svg");
  background-image: url("../svg/status_disabled.svg");
}
.icon-offline {
  -webkit-background-image: url("../svg/status_offline.svg");
  background-image: url("../svg/status_offline.svg");
}
.icon-busy {
  -webkit-background-image: url("../svg/status_busy.svg");
  background-image: url("../svg/status_busy.svg");
}

.icon-away {
  -webkit-background-image: url("../svg/status_away.svg");
  background-image: url("../svg/status_away.svg");
}