.mdi {
  --scale-x: 1;
  --scale-y: 1;
  transform: scaleX(var(--scale-x)) scaleY(var(--scale-y));
}

.mdi-flip-h {
  --scale-x: -1;
}
.mdi-flip-v {
  --scale-y: -1;
}
/* use mdi-spin or mdi-spin-1s to change the speed */
.mdi-spin,
.mdi-spin-1s,
.mdi-spin-2s,
.mdi-spin-3s,
.mdi-spin-4s,
.mdi-spin-5s {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}
.mdi-spin {
  animation: sg-spin 2s infinite linear;
}
@for $i from 1 through 5 {
  .mdi-spin-#{$i}s {
    animation: sg-spin #{$i}s infinite linear;
  }
}
// rotate-45 up to rotate-315
@for $i from 1 through 7 {
  .mdi-rotate-#{$i * 45} {
    transform: rotate(#{$i * 45}deg);
  }
}

// font-10px up to 50px / mdi-10px to 50px
// since SVG icons are now pure CSS, we can merge font-x with mdi-x
@for $i from 10 through 50 {
  .font-#{$i}px {
    font-size: #{$i}px !important;
  }
}