My power duo for dealing with icons and SASS - an extendable %icon that references your icon font. The mixin then allows you to specify the content (the unicode string for the icon), and optionally 'before' or 'after' which creates the respective pseudo element. #icons #iconfonts #scss

icons.scss

%icon {
  font-family: $icon-font;  //set as a variable - it's whatever your icon font name is
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

@mixin icon($content, $position:"") {
  @if $position == "" {
    @extend %icon;
    content: $content;
  } @else if $position == before {
    &::before {
      @extend %icon;
      content: $content;
    }
  } @else if $position == after {
    &::after {
      @extend %icon;
      content: $content;
    }
  }
}

//usage:
//.foo {
//  @include icon('\e001', before);
//}
//or
//.bar {
//  &::after {
//     @include icon('\e001');
//     -- other styles
//  }
//}