$icons: (
  "arrow_down",
  "arrow_down_left",
  "arrow_down_right",
  "arrow_left",
  "arrow_right",
  "arrow_up",
  "arrow_up_left",
  "arrow_up_right",
  "basket",
  "bed",
  "clock",
  "code",
  "creature",
  "cross",
  "cross_small",
  "cup_1",
  "cup_2",
  "dect",
  "external",
  "fairydust",
  "flag",
  "font",
  "gluten",
  "hackertours",
  "hare_head",
  "history",
  "home",
  "hygene",
  "info",
  "lightbulb",
  "link",
  "location",
  "lock",
  "login",
  "logout",
  "looping",
  "menu",
  "menu_small",
  "merch",
  "message",
  "microphone",
  "network",
  "paperplane",
  "pen",
  "pin",
  "plate_and_cutlery",
  "power",
  "question",
  "schedule",
  "search",
  "settings",
  "signup",
  "soldering_iron",
  "tick",
  "tick_small",
  "ticket",
  "toast",
  "train",
  "vegan",
  "warning"
);

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;
    }
  }

  @each $icon in $icons {
    &[data-icon="#{$icon}"]::before {
      mask-image: url("../icon/#{$icon}.svg");
    }
  }
}