Use placeholder selectors for icons

_icons.scss

// Use embedded fonts
@font-face {
  font-family: 'icons';
  font-weight: normal;
  font-style: normal;
  src:
    url(data:application/x-font-ttf;charset=utf-8;base64,...) format('truetype'),
    url(data:application/font-woff;charset=utf-8;base64,...) format('woff');
}


// Map of names and character codes
$icons: (
  ('facebook', '\e601')
  ('linkedin', '\e602')
  ('twitter', '\e603')
  ('youtube', '\e604')
  ('checkmark', '\e61d')
  ('mail', '\e600')
  // ...
);

// Empty list
$all-selectors: ();


// Loop each icon and output selectors
@each $icon in $icons {
  $selectors: (
    // Uncomment to enable data-icon attributes
    /*
    unquote("[data-icon='#{nth($icon, 1)}']:before"),
    unquote("[data-icon-after='#{nth($icon, 1)}']:after"),
    */
    
    unquote("%icon-#{nth($icon, 1)}:before"),
    unquote("%icon-#{nth($icon, 1)}-after:after")
  );

  // Output the actual selectors for each character code
  #{$selectors} { content: nth($icon, 2); }

  // Add icon to list of all selectors
  $all-selectors: join($all-selectors, $selectors, comma);
}


// Icon styles for all selectors
#{$all-selectors} {
  display: inline-block;
  text-transform: none;
  font-family: 'icons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


// Use this mixin to add an icon to an element
// (only the styling of the :before/:after element is affected)
@mixin icon($name, $placement: before) {
  &:#{$placement} {
    @if $placement == after { @extend %icon-#{$name}-after:after; }
    @else { @extend %icon-#{$name}:before; }

    @content;
  }
}

/* SCSS */

.put-a-mail-icon-inside-this-element {
  @include icon(mail);
}

.put-a-youtube-icon-inside-this-element {
  @include icon(youtube, after);
}


/* Output */

@font-face {
  font-family: 'icons';
  font-weight: normal;
  font-style: normal;
  src:
    url(data:application/x-font-ttf;charset=utf-8;base64,...) format("truetype"),
    url(data:application/font-woff;charset=utf-8;base64,...) format("woff");
}

.put-a-mail-icon-inside-this-element:before {
  content: "\e600";
}

.put-a-youtube-icon-inside-this-element:after {
  content: "\e604";
}

.put-a-mail-icon-inside-this-element:before,
.put-a-youtube-icon-inside-this-element:after {
  display: inline-block;
  text-transform: none;
  font-family: 'icons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}