[class*="icon--"] {
  display: inline-block;
  vertical-align: middle;

  min-width: 1.2em;
  min-height: 1.2em;

  background-color: currentColor;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}

/* -------------------------------------------------------------------------- */
/*   icon classes                                                             */
/* -------------------------------------------------------------------------- */

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

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

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

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

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

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

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

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

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

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

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

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

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