.icon-link {
  vertical-align: -0.25rem;
}

.bi {
  display: inline-block;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;

  mask-size: contain;
  mask-position: 50%;
  mask-repeat: no-repeat;
  background-color: currentColor;

  &.bi-circle-half {
    mask-image: url(bootstrap-icons/icons/circle-half.svg);
  }
  &.bi-moon-stars-fill {
    mask-image: url(bootstrap-icons/icons/moon-stars-fill.svg);
  }
  &.bi-brightness-high {
    mask-image: url(bootstrap-icons/icons/brightness-high.svg);
  }
  &.bi-gear {
    mask-image: url(bootstrap-icons/icons/gear.svg);
  }
  &.bi-sun-fill {
    mask-image: url(bootstrap-icons/icons/sun-fill.svg);
  }
  &.bi-tv {
    mask-image: url(bootstrap-icons/icons/tv.svg);
  }
  &.bi-arrow-left-square {
    mask-image: url(bootstrap-icons/icons/arrow-left-square.svg);
  }
  &.bi-arrow-right-square {
    mask-image: url(bootstrap-icons/icons/arrow-right-square.svg);
  }
  &.bi-arrow-up-square {
    mask-image: url(bootstrap-icons/icons/arrow-up-square.svg);
  }
}