.icon {
  display: inline-block;
  width: var(--icon-size, 16px);
  height: var(--icon-size, 16px);
  background-color: currentColor;
  mask: var(--icon) no-repeat center / contain;
  -webkit-mask: var(--icon) no-repeat center / contain;
  flex: 0 0 auto;
}

.icon-plus {
  --icon: url("../icons/plus.svg");
}

.icon-close {
  --icon: url("../icons/close.svg");
}

.icon-phone {
  --icon: url("../icons/phone.svg");
}

.icon-video {
  --icon: url("../icons/video.svg");
}

.icon-mic {
  --icon: url("../icons/mic.svg");
}

.icon-camera {
  --icon: url("../icons/camera.svg");
}

.icon-screen {
  --icon: url("../icons/screen.svg");
}

.icon-headset {
  --icon: url("../icons/headset.svg");
}

.icon-gear {
  --icon: url("../icons/gear.svg");
}

.icon-expand {
  --icon: url("../icons/expand.svg");
}

.icon-hangup {
  --icon: url("../icons/hangup.svg");
}

.icon-reply {
  --icon: url("../icons/reply.svg");
}

.icon-edit {
  --icon: url("../icons/edit.svg");
}

.icon-trash {
  --icon: url("../icons/trash.svg");
}

.icon-check {
  --icon: url("../icons/check.svg");
}

.icon-check-double {
  --icon: url("../icons/check-double.svg");
}

.icon-button,
.attach-button,
.modal-close,
.call-control,
.message-action,
.call-icon {
  --icon-size: 16px;
}

.call-control {
  --icon-size: 18px;
}

.attach-button {
  --icon-size: 18px;
}

.message-action {
  --icon-size: 12px;
}

.modal-close {
  --icon-size: 14px;
  display: grid;
  place-items: center;
}

.call-icon {
  --icon-size: 16px;
}

.call-icons .icon {
  --icon-size: 12px;
}