$ui-icon-sizes: 16 24 36 48 !default;
$ui-icon-color-dark: rgba(0, 0, 0, 0.54) !default;
$ui-icon-color-dark-inactive: rgba(0, 0, 0, 0.26) !default;
$ui-icon-color-light: rgba(255, 255, 255, 1) !default;
$ui-icon-color-light-inactive: rgba(255, 255, 255, 0.3) !default;

.material-icons {
  /* Rules for sizing the icon. */
  @each $size in $ui-icon-sizes {
    &.md-#{$size} {
      font-size: #{$size}px;

      width: #{$size}px;
      height: #{$size}px;
    }
  }
  /* Rules for using icons as black on a light background. */
  &.md-dark {
    color: $ui-icon-color-dark;
    &.md-inactive {
      color: $ui-icon-color-dark-inactive;
    }
  }
  /* Rules for using icons as white on a dark background. */
  &.md-light {
    color: $ui-icon-color-light;
    &.md-inactive {
      color: $ui-icon-color-light-inactive;
    }
  }
}