--- /dev/null
+// https://github.com/sass/sass/issues/659#issuecomment-64819075
+@function char($character-code) {
+ @if function-exists("selector-append") {
+ @return unquote("\"\\#{$character-code}\"");
+ }
+
+ @return str-slice("\x", 1, 1) + $character-code;
+}
+
+$icon-font-family: {{fontName}};
+$icon-font-path: '../fonts' !default;
+
+@font-face {
+ font-family: $icon-font-family;
+ src: url('#{$icon-font-path}/{{fontName}}.eot?#iefix') format('eot');
+}
+@font-face {
+ font-family: $icon-font-family;
+ src: url(data:application/font-woff;charset=utf-8;base64,BASE64_WOFF_FONT) format('woff'),
+ url(data:application/x-font-ttf;charset=utf-8;base64,BASE64_TTF_FONT) format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+// http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps
+$icons: (
+ {{#each codepoints}}
+ {{@key}}: '{{this}}',
+ {{/each}}
+);
+
+// NOTE: This is as complex as we want to get with SCSS functionality.
+//
+// Now that we have a map of icons above, we can iterate over that map and create an icon class
+// for each icon in that list. The iterator below produces CSS classes like this:
+//
+// .vjs-icon-play {
+// font-family: VideoJS;
+// font-weight: normal;
+// font-style: normal;
+// }
+// .vjs-icon-play:before { content: "\25b6"; }
+//
+// We can then use @extend in the codebase when we need to add an icon to a class. @extend builds up
+// the selectors for you so you can avoid duplication. This is generally a bad idea, but since each
+// icon should only be extended one or two other places, we'll roll with it.
+@each $name, $content in $icons {
+ .vjs-icon-#{$name} {
+ font-family: $icon-font-family;
+ font-weight: normal;
+ font-style: normal;
+
+ &:before {
+ content: char($content);
+ }
+ }
+}