i[data-icon] {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  position: relative;
  box-sizing: content-box;

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    background-color: currentColor;
  }

  &[data-icon="arrow-left"]::before {
    mask-image: url("../icon/arrow_left.svg");
  }

  &[data-icon="arrow-up"]::before {
    mask-image: url("../icon/arrow_up.svg");
  }

  &[data-icon="arrow-right"]::before {
    mask-image: url("../icon/arrow_right.svg");
  }

  &[data-icon="arrow-down"]::before {
    mask-image: url("../icon/arrow_down.svg");
  }

  &[data-icon="info"]::before {
    mask-image: url("../icon/info.svg");
  }

  &[data-icon="home"]::before {
    mask-image: url("../icon/home.svg");
  }

  &[data-icon="menu-small"]::before {
    mask-image: url("../icon/menu_small.svg");
  }

  &[data-icon="light"]::before {
    mask-image: url("../icon/lightbulb.svg");
  }

  &[data-icon="warning"]::before {
    mask-image: url("../icon/warning.svg");
  }
}