diff --git a/src/css/components/_audio.scss b/src/css/components/_audio.scss
index b3894e7d75..d705ad38f6 100644
--- a/src/css/components/_audio.scss
+++ b/src/css/components/_audio.scss
@@ -1,3 +1,3 @@
-.video-js .vjs-audio-button {
+.video-js .vjs-audio-button .vjs-icon-placeholder {
   @extend .vjs-icon-audio;
 }
diff --git a/src/css/components/_big-play.scss b/src/css/components/_big-play.scss
index a2d0456ecf..04b4e034dd 100644
--- a/src/css/components/_big-play.scss
+++ b/src/css/components/_big-play.scss
@@ -17,11 +17,11 @@
   @include border-radius(0.3em);
   @include transition(all 0.4s);
 
-  @extend .vjs-icon-play;
-
   // Since the big play button doesn't inherit from vjs-control, we need to specify a bit more than
   // other buttons for the icon.
-  &:before {
+  & .vjs-icon-placeholder:before {
+    @extend .vjs-icon-play;
+
     @extend %icon-default;
   }
 }
diff --git a/src/css/components/_captions.scss b/src/css/components/_captions.scss
index df8db5dbe1..1fe22af244 100644
--- a/src/css/components/_captions.scss
+++ b/src/css/components/_captions.scss
@@ -1,3 +1,3 @@
-.video-js .vjs-captions-button {
+.video-js .vjs-captions-button .vjs-icon-placeholder {
   @extend .vjs-icon-captions;
 }
diff --git a/src/css/components/_chapters.scss b/src/css/components/_chapters.scss
index 91695452f5..7eab3e8036 100644
--- a/src/css/components/_chapters.scss
+++ b/src/css/components/_chapters.scss
@@ -1,4 +1,4 @@
-.video-js .vjs-chapters-button {
+.video-js .vjs-chapters-button .vjs-icon-placeholder {
   @extend .vjs-icon-chapters;
 }
 
diff --git a/src/css/components/_close-button.scss b/src/css/components/_close-button.scss
index abb2193c21..2ebfcd9c34 100644
--- a/src/css/components/_close-button.scss
+++ b/src/css/components/_close-button.scss
@@ -1,5 +1,8 @@
 .video-js .vjs-control.vjs-close-button {
-  @extend .vjs-icon-cancel;
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-cancel;
+  }
+
   cursor: pointer;
   height: 3em;
   position: absolute;
diff --git a/src/css/components/_control.scss b/src/css/components/_control.scss
index 3e6da44c93..5b9d18cfb1 100644
--- a/src/css/components/_control.scss
+++ b/src/css/components/_control.scss
@@ -10,7 +10,7 @@
   width: 4em;
   @include flex(none);
 
-  &:before {
+  & .vjs-icon-placeholder:before {
     font-size: 1.8em;
     line-height: 1.67;
 
diff --git a/src/css/components/_descriptions.scss b/src/css/components/_descriptions.scss
index d298ef8205..854a1cbb9c 100644
--- a/src/css/components/_descriptions.scss
+++ b/src/css/components/_descriptions.scss
@@ -1,3 +1,3 @@
-.video-js .vjs-descriptions-button {
+.video-js .vjs-descriptions-button .vjs-icon-placeholder {
   @extend .vjs-icon-audio-description;
 }
diff --git a/src/css/components/_fullscreen.scss b/src/css/components/_fullscreen.scss
index e415c3fa6c..c68343833a 100644
--- a/src/css/components/_fullscreen.scss
+++ b/src/css/components/_fullscreen.scss
@@ -1,9 +1,12 @@
 .video-js .vjs-fullscreen-control {
   cursor: pointer;
   @include flex(none);
-  @extend .vjs-icon-fullscreen-enter;
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-fullscreen-enter;
+  }
 }
 // Switch to the exit icon when the player is in fullscreen
-.video-js.vjs-fullscreen .vjs-fullscreen-control {
+.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
   @extend .vjs-icon-fullscreen-exit;
 }
diff --git a/src/css/components/_play-pause.scss b/src/css/components/_play-pause.scss
index 7e2f73792f..48d174612f 100644
--- a/src/css/components/_play-pause.scss
+++ b/src/css/components/_play-pause.scss
@@ -1,11 +1,11 @@
-.video-js .vjs-play-control {
+.video-js .vjs-play-control .vjs-icon-placeholder {
   cursor: pointer;
   @include flex(none);
   @extend .vjs-icon-play;
 }
-.video-js .vjs-play-control.vjs-playing {
+.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
   @extend .vjs-icon-pause;
 }
-.video-js .vjs-play-control.vjs-ended {
+.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
   @extend .vjs-icon-replay;
 }
diff --git a/src/css/components/_subtitles.scss b/src/css/components/_subtitles.scss
index 3527c7a5d3..fb5da83aa7 100644
--- a/src/css/components/_subtitles.scss
+++ b/src/css/components/_subtitles.scss
@@ -1,3 +1,3 @@
-.video-js .vjs-subtitles-button {
+.video-js .vjs-subtitles-button .vjs-icon-placeholder {
   @extend .vjs-icon-subtitles;
 }
diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
index 922f833aec..307303d1b5 100644
--- a/src/css/components/_volume.scss
+++ b/src/css/components/_volume.scss
@@ -1,21 +1,24 @@
 .video-js .vjs-mute-control {
   cursor: pointer;
   @include flex(none);
-  @extend .vjs-icon-volume-high;
   // padding here is for IE < 9, it doesn't do width: auto from
   // another style correctly
   padding-left: 2em;
   padding-right: 2em;
   padding-bottom: 3em;
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-volume-high;
+  }
 }
 
-.video-js .vjs-mute-control.vjs-vol-0 {
+.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
   @extend .vjs-icon-volume-mute;
 }
-.video-js .vjs-mute-control.vjs-vol-1 {
+.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
   @extend .vjs-icon-volume-low;
 }
-.video-js .vjs-mute-control.vjs-vol-2 {
+.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
   @extend .vjs-icon-volume-mid;
 }
 
diff --git a/src/js/button.js b/src/js/button.js
index 45aa87a05d..f1bcb85049 100644
--- a/src/js/button.js
+++ b/src/js/button.js
@@ -33,6 +33,7 @@ class Button extends ClickableComponent {
     tag = 'button';
 
     props = assign({
+      innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span>',
       className: this.buildCSSClass()
     }, props);
 
diff --git a/src/js/clickable-component.js b/src/js/clickable-component.js
index dbaa471c70..e69cec4555 100644
--- a/src/js/clickable-component.js
+++ b/src/js/clickable-component.js
@@ -51,6 +51,7 @@ class ClickableComponent extends Component {
    */
   createEl(tag = 'div', props = {}, attributes = {}) {
     props = assign({
+      innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span>',
       className: this.buildCSSClass(),
       tabIndex: 0
     }, props);