.wig-icon {
  @extend .align-center,
  .align-middle;
  display: inline-flex;
  font-weight: 600;
  overflow: hidden;
  &--margin {
    margin: rem-calc(0 10);
  }
  &--mini-curved {
    @extend .wig-button--mini-curved;
  }
  &--semi-rounded {
    @extend .wig-button--semi-rounded;
  }
  &--circle {
    @extend .wig-button--circle;
  }
  &--square {
    @extend .wig-button--square;
  }
  &--gray {
    color: $white;
    background-color: $gray;
  }
  &--primary {
    color: $white;
    background-color: $primary-color;
  }
  &--secondary {
    color: $black;
    background-color: $secondary-color;
  }
  &--danger {
    color: $white;
    background-color: $alert-color;
  }
  &--warning {
    color: $white;
    background-color: $warning-color;
  }
  &--transparent {
    color: $gray;
    background-color: $transparent;
  }
  &--still-gray {
    color: $gray;
    background-color: $transparent;
  }
  &--white {
    color: $white;
    background-color: $transparent;
  }
  &--black {
    color: $black;
    background-color: $transparent;
  }
  @each $name,
  $dictionary in $icon {
    &--#{$name} {
      @each $property,
      $value in $dictionary {
        #{$property}: $value
      }
      &.wig-icon--semiRounded {
        border-radius: (map-get($map: $dictionary, $key: width)/4);
      }
    }
  }
}