Sweet icons stuff with sass

Explanations.md

Sass needed

// Icon font name
$font-family-icon: 'icomoon';

// Icons declaration
$icons-list: (
  "instagram": "\e913",
  "twitter": "\e912",
  "youtube": "\e911"
);

/**
 * Generate style to display icon
 * @param  {String} $icon - The name of the wanted icon
 * @param  {String} $font - The font name to use. Default $font-family-icon
 * @param  {String} $list - The icon list to use. Default $icons-list
 */
@mixin icon($icon, $font: $font-family-icon, $list: $icons-list) {
  content: map_get($list, $icon);
  font-family: $font;
}

/**
 * Generate the style for a list of icons. Need to be used inside a class.
 * Example: Let's take the ".icon" class in which we call this mixin, and the "contact"
 * icon name. The following class need to be added to an element to display the icon:
 * "icon icon--contact"
 * @param  {String} $font     - The font name
 * @param  {Map}    $list     - A map with all icons
 */
@mixin icons-list($font, $list) {
  display: inline-block;
  font-weight: normal;
  font-family: $font;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: middle;
  text-transform: none;
  speak: none;

  @each $icon, $content in $list {
    &--#{$icon}:before {
      content: $content;
    }
  }
}

How to use

.icon {
  @include icons-list($font-family-icon, $icons-list);
}

<span class="icon icon--youtube"></span>

.something:before {
  @include icon("burger-menu");
}

.something-else:before {
  @include icon("burger-menu", $another-font-name, $another-icon-list);
}