diff --git a/CHANGELOG.md b/CHANGELOG.md
index f868b97628..e91ea17a1d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ CHANGELOG
 * @forbesjo fixed errorDisplay erroring on subsequent openings ([view](https://github.com/videojs/video.js/pull/2966))
 * @incompl updated build command in CONTRIBUTING.md ([view](https://github.com/videojs/video.js/pull/2967))
 * @forbesjo updated player to not autoplay if there is no source ([view](https://github.com/videojs/video.js/pull/2971))
+* @gkatsev updated css to have ascii codepoints for fonticons. Expose new scss file ([view](https://github.com/videojs/video.js/pull/2973))
 
 --------------------
 
diff --git a/build/grunt.js b/build/grunt.js
index 0c6e0e1846..0ced6c7bde 100644
--- a/build/grunt.js
+++ b/build/grunt.js
@@ -151,7 +151,7 @@ module.exports = function(grunt) {
     watch: {
       skin: {
         files: ['src/css/**/*'],
-        tasks: 'sass'
+        tasks: ['sass', 'wrapcodepoints']
       },
       jshint: {
         files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
@@ -196,7 +196,7 @@ module.exports = function(grunt) {
     sass: {
       build: {
         files: {
-          'build/temp/video-js.css': 'src/css/video-js.scss'
+          'build/temp/video-js.css': 'src/css/vjs.scss'
         }
       }
     },
@@ -455,6 +455,7 @@ module.exports = function(grunt) {
     'uglify',
 
     'sass',
+    'wrapcodepoints',
     'version:css',
     'cssmin',
 
@@ -479,6 +480,17 @@ module.exports = function(grunt) {
     'zip:dist'
   ]);
 
+  // Sass turns unicode codepoints into utf8 characters.
+  // We don't want that so we unwrapped them in the templates/scss.hbs file.
+  // After sass has generated our css file, we need to wrap the codepoints
+  // in quotes for it to work.
+  grunt.registerTask('wrapcodepoints', function() {
+    const sassConfig = grunt.config.get('sass.build.files');
+    const cssPath = Object.keys(sassConfig)[0];
+    const css = grunt.file.read(cssPath);
+    grunt.file.write(cssPath, css.replace(/(\\f\w+);/g, "'$1';"));
+  });
+
   // Default task - build and test
   grunt.registerTask('default', ['test']);
 
diff --git a/package.json b/package.json
index 769875697e..08e5c8ec4b 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "object.assign": "^4.0.1",
     "safe-json-parse": "^4.0.0",
     "tsml": "1.0.1",
-    "videojs-font": "1.4.0",
+    "videojs-font": "1.5.1",
     "videojs-ie8": "1.1.1",
     "videojs-swf": "5.0.1",
     "videojs-vtt.js": "^0.12.1",
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
index 0ed69c252b..f500e494bb 100644
--- a/src/css/_variables.scss
+++ b/src/css/_variables.scss
@@ -1 +1,2 @@
 $icon-font-path: 'font' !default;
+$icon-codepoints: false !default;
diff --git a/src/css/video-js.scss b/src/css/video-js.scss
index a44e18d5f4..64600c8658 100644
--- a/src/css/video-js.scss
+++ b/src/css/video-js.scss
@@ -2,7 +2,11 @@
 @import "private-variables";
 @import "utilities";
 
-@import "../../node_modules/videojs-font/scss/icons";
+@if $icon-codepoints {
+  @import "../../node_modules/videojs-font/scss/icons-codepoints";
+} else {
+  @import "../../node_modules/videojs-font/scss/icons";
+}
 
 @import "components/layout";
 @import "components/big-play";
diff --git a/src/css/vjs.scss b/src/css/vjs.scss
new file mode 100644
index 0000000000..6cff449e7e
--- /dev/null
+++ b/src/css/vjs.scss
@@ -0,0 +1,3 @@
+$icon-codepoints: true;
+
+@import "video-js";