.ui-icon{
  display: inline-block;
  text-align: center;
  height: 1em;
  background: transparent !important;
  &:before{
    position: relative;
    z-index: 1;
  }
  &:after{
    content: "";
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    border-radius: 2em;
    width: 2em;
    height: 2em;
    top: -1.5em;
    display: block;
    position: relative;
    z-index: 0;
    background-clip: padding-box;
  }
  &.b-2x:after{
    border-width: 2px;
  }
  &.b-3x:after{
    border-width: 3px;
  }
  &.ui-icon-sm:after{
    width: 1.7em;
    height: 1.7em;
    top: -1.35em;
  }
  &.primary:after{
    background-color: $primary;
  }
  &.success:after{
    background-color: $success;
  }
  &.info:after{
    background-color: $info;
  }
  &.warning:after{
    background-color: $warning;
  }
  &.danger:after{
    background-color: $danger;
  }
  &.accent:after{
    background-color: $accent;
  }
  &.dark:after{
    background-color: $dark;
  }
  &.light:after{
    background-color: $light;
  }
  &.white:after{
    background-color: #fff;
  }
}