This an alternative template for [json2fontcss](https://github.com/twolfson/json2fontcss). It allows the entire icon font to be styled in one loop.

_i-icons.scss

@import "i-setup";

.i {
  @include icon(false, "before", true);
}

// Automagically Set up a class name for each icon
@each $icon in $icons {
  $name: nth($icon, 1);
  /*
  <div><i class="i i--#{$name}"></i> <code>.i--#{$name}</code></div>
  */
  .i--#{$name} {
    @include icon($name, 'before', false);
  }
}

_i-setup.scss

// Icon list (corresponds to icon font characters)
// Declare empty list variable ready to append to
$icons: ();
$icons: append($icons, "chevron-left" "\e006", comma);
$icons: append($icons, "minus" "\e003", comma);
$icons: append($icons, "tick" "\e000", comma);
$icons: append($icons, "chevron-right" "\e005", comma);
$icons: append($icons, "chevron-down" "\e007", comma);
$icons: append($icons, "chevron-up" "\e004", comma);
$icons: append($icons, "plus" "\e002", comma);
$icons: append($icons, "remove" "\e001", comma);
$icons: append($icons, "attach" "\e008", comma);

@function match($haystack, $needle) {
  @each $item in $haystack {
    $index: index($item, $needle);
    @if $index {
        $return: if($index == 1, 2, $index);
        @return nth($item, $return);
    }
  }
  @return false;
}

// For adding icons to elements using CSS pseudo-elements
// Source: http://jaydenseric.dev/blog/fun-with-sass-and-font-icons
@mixin icon($icon: false, $position: 'before', $styles: false) {
  // Either a :before or :after pseudo-element, defaulting to :before
  &:#{$position} {
    @if $icon {
      // Icon has been specified
      content: match($icons, $icon);
    }
    @if $styles {
      // Suportive icon styles have been specified
      font-family: "Red Hat Icons";
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
    }
    // Include any extra rules supplied for the pseudo-element
    @content;
  }
}

@font-face {
  font-family: "My Icons";
  src:url("../fonts/my-icons/my-icons.eot");
  src:url("../fonts/my-icons/my-icons.eot?#iefix") format("embedded-opentype"),
    url("../fonts/my-icons/my-icons.woff") format("woff"),
    url("../fonts/my-icons/my-icons.ttf") format("truetype"),
    url("../fonts/my-icons/my-icons.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

scss.mustache.scss

// Icon list (corresponds to icon font characters)
// Declare empty list variable ready to append to
$icons: ();
{{#chars}}
$icons: append($icons, "{{name}}" "\{{{value}}}", comma);
{{/chars}}

@function match($haystack, $needle) {
  @each $item in $haystack {
    $index: index($item, $needle);
    @if $index {
      $return: if($index == 1, 2, $index);
      @return nth($item, $return);
    }
  }
  @return false;
}

// For adding icons to elements using CSS pseudo-elements
// Source: http://jaydenseric.dev/blog/fun-with-sass-and-font-icons
@mixin icon($icon: false, $position: 'before', $styles: false) {
  // Either a :before or :after pseudo-element, defaulting to :before
  &:#{$position} {
    @if $icon {
      // Icon has been specified
      content: match($icons, $icon);
    }
    @if $styles {
      // Suportive icon styles have been specified
      font-family: {{{escapedFontFamily}}};
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
    }
    // Include any extra rules supplied for the pseudo-element
    @content;
  }
}

@font-face {
  font-family: {{{escapedFontFamily}}};
  {{#fonts.eot}}
  src:url("{{{fonts.eot}}}");
  {{/fonts.eot}}
  src:{{#fonts.eot}}url("{{{fonts.eot}}}?#iefix") format("embedded-opentype"),
    {{/fonts.eot}}{{#fonts.woff}}url("{{{fonts.woff}}}") format("woff"),
    {{/fonts.woff}}{{#fonts.ttf}}url("{{{fonts.ttf}}}") format("truetype"),
    {{/fonts.ttf}}{{#fonts.svg}}url("{{{fonts.svg}}}#icomoon") format("svg"){{/fonts.svg}};
  font-weight: normal;
  font-style: normal;
}