.fill-icon {
  color: white !important;
  &:before {
    background: black;
    position: relative;
    border-radius: $icon-fill-border-radius;
    padding: 1px;
  }

  &.brand-default:before {
    background: $brand-default;
  }
  &.brand-secondary:before {
    background: $brand-secondary;
  }
  &.brand-primary:before {
    background: $brand-primary;
  }
  &.brand-info:before {
    background: $brand-info;
  }
  &.brand-success:before {
    background: $brand-success;
  }
  &.brand-warning:before {
    background: $brand-warning;
  }
  &.brand-danger:before {
    background: $brand-danger;
  }
  &.brand-dark:before {
    background: $brand-dark;
  }

  &.gray-darker:before {
    background: $gray-darker;
  }
  &.gray-dark:before {
    background: $gray-dark;
  }
  &.gray:before {
    background: $gray;
  }
  &.gray-light:before {
    background: $gray-light;
  }
  &.gray-lighter:before {
    background: $gray-lighter;
  }

}

.icon-loading {
  font-family: 'ionicons';
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  -webkit-animation:spin .75s linear infinite;
  -moz-animation:spin .75s linear infinite;
  animation:spin .75s linear infinite;

  &:before {
    content: "\e144";
  }
}

.icon-refreshing {
  font-family: 'ionicons';
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  -webkit-animation:spin .75s linear infinite;
  -moz-animation:spin .75s linear infinite;
  animation:spin .75s linear infinite;

  &:before {
    content: "\e144";
  }
}