feat(UI): Replace icon font with SVG icons (#8986)

* Update all UI components to use SVG icons instead of icon fonts
* Adjust some icon sizes to 32px

Replacing icon fonts with inline SVGs removes the loading delay caused
by font fetching. Icons now appear immediately with zero delay.

Close https://github.com/shaka-project/shaka-player/issues/2467

demo/cast_receiver/index.html

@@ -25,6 +25,7 @@
     <link rel="preconnect" href="https://www.gstatic.com">
     <link rel="preconnect" href="https://fonts.gstatic.com">
 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round&display=block" />
     <link rel="stylesheet" href="../../dist/controls.css">
     <link rel="stylesheet" href="receiver_app.css">
 

demo/close_button.js

@@ -21,11 +21,16 @@ shakaDemo.CloseButton = class extends shaka.ui.Element {
    */
   constructor(parent, controls) {
     super(parent, controls);
+
     this.button_ = document.createElement('button');
-    this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-no-propagation');
     this.button_.classList.add('close-button');
-    this.button_.textContent = 'close'; // Close icon.
+
+    new shaka.ui.MaterialSVGIcon(this.button_).use(
+        // eslint-disable-next-line @stylistic/max-len
+        'M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z',
+    );
+
     this.parent.appendChild(this.button_);
 
     this.button_.addEventListener('click', () => {

demo/index.html

@@ -32,6 +32,7 @@
     <link rel="manifest" href="app_manifest.json">
     <link rel="icon" href="favicon.ico">
 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round&display=block" />
     <link rel="stylesheet" href="../dist/demo.css">
     <link rel="stylesheet" href="../dist/controls.css">
 

demo/visualizer_button.js

@@ -27,12 +27,10 @@ shakaDemo.VisualizerButton = class extends shaka.ui.Element {
     this.button_.classList.add('shaka-pip-button');
     this.button_.classList.add('shaka-tooltip');
 
-    /** @private {!HTMLElement} */
-    this.icon_ = /** @type {!HTMLElement} */ (
-      document.createElement('i'));
-    this.icon_.classList.add('material-icons-round');
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.icon_ = /** @type {!shaka.ui.MaterialSVGIcon} */ (
+      new shaka.ui.MaterialSVGIcon(this.button_));
     this.setIcon_();
-    this.button_.appendChild(this.icon_);
 
     const label = document.createElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -80,9 +78,11 @@ shakaDemo.VisualizerButton = class extends shaka.ui.Element {
   /** @private */
   setIcon_() {
     if (shakaDemoMain.getIsVisualizerActive()) {
-      this.icon_.textContent = 'bar_chart';
+      // eslint-disable-next-line @stylistic/max-len
+      this.icon_.use('M680-160q-17 0-28.5-11.5T640-200v-200q0-17 11.5-28.5T680-440h80q17 0 28.5 11.5T800-400v200q0 17-11.5 28.5T760-160h-80Zm-240 0q-17 0-28.5-11.5T400-200v-560q0-17 11.5-28.5T440-800h80q17 0 28.5 11.5T560-760v560q0 17-11.5 28.5T520-160h-80Zm-240 0q-17 0-28.5-11.5T160-200v-360q0-17 11.5-28.5T200-600h80q17 0 28.5 11.5T320-560v360q0 17-11.5 28.5T280-160h-80Z');
     } else {
-      this.icon_.textContent = 'add_chart';
+      // eslint-disable-next-line @stylistic/max-len
+      this.icon_.use('M320-280q17 0 28.5-11.5T360-320v-200q0-17-11.5-28.5T320-560q-17 0-28.5 11.5T280-520v200q0 17 11.5 28.5T320-280Zm160 0q17 0 28.5-11.5T520-320v-320q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640v320q0 17 11.5 28.5T480-280Zm160 0q17 0 28.5-11.5T680-320v-80q0-17-11.5-28.5T640-440q-17 0-28.5 11.5T600-400v80q0 17 11.5 28.5T640-280Zm80-320q-17 0-28.5-11.5T680-640v-40h-40q-17 0-28.5-11.5T600-720q0-17 11.5-28.5T640-760h40v-40q0-17 11.5-28.5T720-840q17 0 28.5 11.5T760-800v40h40q17 0 28.5 11.5T840-720q0 17-11.5 28.5T800-680h-40v40q0 17-11.5 28.5T720-600ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h320q17 0 28.5 11.5T560-800v160q0 33 23.5 56.5T640-560h160q17 0 28.5 11.5T840-520v320q0 33-23.5 56.5T760-120H200Z');
     }
   }
 

ui/ad_statistics_button.js

@@ -15,6 +15,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -39,12 +40,9 @@ shaka.ui.AdStatisticsButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-ad-statistics-button');
 
-    /** @private {!HTMLElement} */
-    this.icon_ = shaka.util.Dom.createHTMLElement('i');
-    this.icon_.classList.add('material-icons-round');
-    this.icon_.textContent =
-      shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
-    this.button_.appendChild(this.icon_);
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -148,13 +146,11 @@ shaka.ui.AdStatisticsButton = class extends shaka.ui.Element {
   /** @private */
   onClick_() {
     if (this.container_.classList.contains('shaka-hidden')) {
-      this.icon_.textContent =
-          shaka.ui.Enums.MaterialDesignIcons.STATISTICS_OFF;
+      this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_OFF);
       this.timer_.tickEvery(0.1);
       shaka.ui.Utils.setDisplay(this.container_, true);
     } else {
-      this.icon_.textContent =
-          shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
+      this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON);
       this.timer_.stop();
       shaka.ui.Utils.setDisplay(this.container_, false);
     }
@@ -200,15 +196,13 @@ shaka.ui.AdStatisticsButton = class extends shaka.ui.Element {
     const closeElement = shaka.util.Dom.createHTMLElement('div');
     closeElement.classList.add('shaka-no-propagation');
     closeElement.classList.add('shaka-statistics-close');
-    const icon = shaka.util.Dom.createHTMLElement('i');
-    icon.classList.add('material-icons');
-    icon.classList.add('notranslate');
-    icon.classList.add('material-icons-round');
-    icon.textContent =
-      shaka.ui.Enums.MaterialDesignIcons.CLOSE;
-    closeElement.appendChild(icon);
+    const icon = new shaka.ui.MaterialSVGIcon(closeElement,
+        shaka.ui.Enums.MaterialDesignSVGIcons.CLOSE);
+    const iconElement = icon.getSvgElement();
+    iconElement.classList.add('material-icons', 'notranslate');
+
     this.container_.appendChild(closeElement);
-    this.eventManager.listen(icon, 'click', () => {
+    this.eventManager.listen(iconElement, 'click', () => {
       this.onClick_();
     });
     for (const name of this.controls.getConfig().adStatisticsList) {

ui/airplay_button.js

@@ -14,6 +14,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -39,11 +40,8 @@ shaka.ui.AirPlayButton = class extends shaka.ui.Element {
     this.airplayButton_.classList.add('shaka-tooltip');
     this.airplayButton_.ariaPressed = 'false';
 
-    /** @private {!HTMLElement} */
-    this.airplayIcon_ = shaka.util.Dom.createHTMLElement('i');
-    this.airplayIcon_.classList.add('material-icons-round');
-    this.airplayIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.AIRPLAY;
-    this.airplayButton_.appendChild(this.airplayIcon_);
+    new shaka.ui.MaterialSVGIcon(this.airplayButton_).use(
+        shaka.ui.Enums.MaterialDesignSVGIcons.AIRPLAY);
 
     // Don't show the button if AirPlay is not supported.
     if (!window.WebKitPlaybackTargetAvailabilityEvent) {

ui/audio_language_selection.js

@@ -29,7 +29,7 @@ shaka.ui.AudioLanguageSelection = class extends shaka.ui.SettingsMenu {
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.LANGUAGE);
+    super(parent, controls, shaka.ui.Enums.MaterialDesignSVGIcons.LANGUAGE);
 
     this.button.classList.add('shaka-language-button');
     this.button.classList.add('shaka-tooltip-status');

ui/cast_button.js

@@ -13,6 +13,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -44,11 +45,9 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
     this.castButton_.classList.add('shaka-tooltip');
     this.castButton_.ariaPressed = 'false';
 
-    /** @private {!HTMLElement} */
-    this.castIcon_ = shaka.util.Dom.createHTMLElement('i');
-    this.castIcon_.classList.add('material-icons-round');
-    this.castIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.CAST;
-    this.castButton_.appendChild(this.castIcon_);
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.castIcon_ = new shaka.ui.MaterialSVGIcon(this.castButton_,
+        shaka.ui.Enums.MaterialDesignSVGIcons.CAST);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -120,11 +119,9 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
   onCastStatusChange_() {
     const canCast = this.castProxy_.canCast() && this.controls.isCastAllowed();
     const isCasting = this.castProxy_.isCasting();
-    const materialDesignIcons = shaka.ui.Enums.MaterialDesignIcons;
+    const Icons = shaka.ui.Enums.MaterialDesignSVGIcons;
     shaka.ui.Utils.setDisplay(this.castButton_, canCast);
-    this.castIcon_.textContent = isCasting ?
-                                   materialDesignIcons.EXIT_CAST :
-                                   materialDesignIcons.CAST;
+    this.castIcon_.use(isCasting ? Icons.EXIT_CAST : Icons.CAST);
 
     // Aria-pressed set to true when casting, set to false otherwise.
     if (canCast) {

ui/chapter_selection.js

@@ -28,7 +28,7 @@ shaka.ui.ChapterSelection = class extends shaka.ui.SettingsMenu {
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.CHAPTER);
+    super(parent, controls, shaka.ui.Enums.MaterialDesignSVGIcons.CHAPTER);
 
     this.button.classList.add('shaka-chapter-button');
     this.menu.classList.add('shaka-chapters');

ui/controls.less

@@ -15,5 +15,3 @@
 @import "less/thumbnails.less";
 @import "less/material_svg_icon.less";
 @import (css, inline) "https://fonts.googleapis.com/css?family=Roboto";
-// NOTE: Working around google/material-design-icons#958
-@import (css, inline) "https://fonts.googleapis.com/icon?family=Material+Icons+Round";

ui/enums.js

@@ -7,51 +7,6 @@
 
 goog.provide('shaka.ui.Enums');
 
-
-/**
- * These strings are used to insert material design icons
- * and should never be localized.
- * @enum {string}
- */
-shaka.ui.Enums.MaterialDesignIcons = {
-  'FULLSCREEN': 'fullscreen',
-  'EXIT_FULLSCREEN': 'fullscreen_exit',
-  'CLOSE': 'close',
-  'CLOSED_CAPTIONS': 'closed_caption',
-  'CLOSED_CAPTIONS_OFF': 'closed_caption_disabled',
-  'CHECKMARK': 'done',
-  'LANGUAGE': 'language',
-  'PIP': 'picture_in_picture_alt',
-  // 'branding_watermark' material icon looks like a "dark version"
-  // of the p-i-p icon. We use "dark version" icons to signal that the
-  // feature is turned on.
-  'EXIT_PIP': 'branding_watermark',
-  'BACK': 'navigate_before',
-  'RESOLUTION': 'tune',
-  'MUTE': 'volume_up',
-  'UNMUTE': 'volume_off',
-  'CAST': 'cast',
-  'EXIT_CAST': 'cast_connected',
-  'OPEN_OVERFLOW': 'settings',
-  'REWIND': 'fast_rewind',
-  'FAST_FORWARD': 'fast_forward',
-  'PLAY': 'play_arrow',
-  'PLAYBACK_RATE': 'slow_motion_video',
-  'PAUSE': 'pause',
-  'LOOP': 'repeat',
-  'UNLOOP': 'repeat_on',
-  'AIRPLAY': 'airplay',
-  'REPLAY': 'replay',
-  'SKIP_NEXT': 'skip_next',
-  'SKIP_PREVIOUS': 'skip_previous',
-  'STATISTICS_ON': 'insert_chart_outlined',
-  'STATISTICS_OFF': 'insert_chart',
-  'RECENTER_VR': 'control_camera',
-  'TOGGLE_STEREOSCOPIC': '3d_rotation',
-  'DOWNLOAD': 'download',
-  'CHAPTER': 'bookmarks',
-};
-
 /**
  * These strings are used to insert material symbols rounded filled SVG icons
  * and should never be localized.

ui/externs/ui.js

@@ -562,7 +562,7 @@ shaka.extern.IUISettingsMenu = class {
     this.button;
 
     /**
-     * @protected {!HTMLElement}
+     * @protected {!shaka.ui.MaterialSVGIcon}
      * @exportDoc
      */
     this.icon;

ui/fast_forward_button.js

@@ -12,6 +12,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.util.Dom');
 
 
@@ -30,12 +31,13 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
 
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
-    this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-fast-forward-button');
     this.button_.classList.add('shaka-tooltip-status');
     this.button_.setAttribute('shaka-status', '1x');
-    this.button_.textContent =
-      shaka.ui.Enums.MaterialDesignIcons.FAST_FORWARD;
+
+    new shaka.ui.MaterialSVGIcon(this.button_).use(
+        shaka.ui.Enums.MaterialDesignSVGIcons.FAST_FORWARD);
+
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 

ui/fullscreen_button.js

@@ -13,6 +13,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.util.Dom');
 
 
@@ -35,12 +36,14 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-fullscreen-button');
-    this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-tooltip');
 
+    /** @private {shaka.ui.MaterialSVGIcon} */
+    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons.FULLSCREEN);
+
     this.checkSupport_();
 
-    this.button_.textContent = shaka.ui.Enums.MaterialDesignIcons.FULLSCREEN;
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 
@@ -110,10 +113,10 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
    * @private
    */
   updateIcon_() {
-    this.button_.textContent =
-      this.controls.isFullScreenEnabled() ?
-      shaka.ui.Enums.MaterialDesignIcons.EXIT_FULLSCREEN :
-      shaka.ui.Enums.MaterialDesignIcons.FULLSCREEN;
+    this.icon_.use(this.controls.isFullScreenEnabled() ?
+      shaka.ui.Enums.MaterialDesignSVGIcons.EXIT_FULLSCREEN :
+      shaka.ui.Enums.MaterialDesignSVGIcons.FULLSCREEN,
+    );
   }
 };
 

ui/hidden_fast_forward_button.js

@@ -25,8 +25,7 @@ shaka.ui.HiddenFastForwardButton = class extends shaka.ui.HiddenSeekButton {
     super(parent, controls);
 
     this.seekContainer.classList.add('shaka-fast-forward-container');
-    this.seekIcon.textContent =
-        shaka.ui.Enums.MaterialDesignIcons.FAST_FORWARD;
+    this.seekIcon.use(shaka.ui.Enums.MaterialDesignSVGIcons.FAST_FORWARD);
     this.isRewind = false;
   }
 };

ui/hidden_rewind_button.js

@@ -25,8 +25,7 @@ shaka.ui.HiddenRewindButton = class extends shaka.ui.HiddenSeekButton {
     super(parent, controls);
 
     this.seekContainer.classList.add('shaka-rewind-container');
-    this.seekIcon.textContent =
-        shaka.ui.Enums.MaterialDesignIcons.REWIND;
+    this.seekIcon.use(shaka.ui.Enums.MaterialDesignSVGIcons.REWIND);
     this.isRewind = true;
   }
 };

ui/hidden_seek_button.js

@@ -7,6 +7,7 @@
 goog.provide('shaka.ui.HiddenSeekButton');
 
 goog.require('shaka.ui.Element');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.util.Timer');
 goog.require('shaka.util.Dom');
 
@@ -70,11 +71,10 @@ shaka.ui.HiddenSeekButton = class extends shaka.ui.Element {
     this.seekValue_.textContent = '0s';
     this.seekContainer.appendChild(this.seekValue_);
 
-    /** @protected {!HTMLElement} */
-    this.seekIcon = shaka.util.Dom.createHTMLElement('span');
-    this.seekIcon.classList.add(
+    /** @protected {!shaka.ui.MaterialSVGIcon} */
+    this.seekIcon = new shaka.ui.MaterialSVGIcon(this.seekContainer);
+    this.seekIcon.getSvgElement().classList.add(
         'shaka-forward-rewind-container-icon');
-    this.seekContainer.appendChild(this.seekIcon);
 
     /** @protected {boolean} */
     this.isRewind = false;

ui/less/buttons.less

@@ -156,6 +156,5 @@
 /* This class is instead of material-icon-round
  * because the font-size of 24 doesn't look good */
 .shaka-forward-rewind-container-icon {
-  font-family: "Material Icons Round";
-  font-size: 34px;
+  font-size: 32px;
 }

ui/less/containers.less

@@ -16,8 +16,7 @@
   display: flex;
 
   /* Set a special font for material design icons. */
-  .material-icons-round {
-    font-family: "Material Icons Round";
+  .material-svg-icon {
     font-size: 24px;
   }
 
@@ -196,17 +195,28 @@
     transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 100ms;
     text-shadow: 0 0 2px @general-background-color;
 
-    &.material-icons-round {
-      font-size: 34px;
+    /* Use a bit larger icons for some buttons */
+    &.shaka-fast-forward-button,
+    &.shaka-rewind-button,
+    &.shaka-small-play-button,
+    &.shaka-skip-next-button {
+      .material-svg-icon {
+        font-size: 32px;
+      }
     }
 
-    &.shaka-mute-button {
-      font-size: 28px;
+    &.shaka-fullscreen-button {
+      .material-svg-icon {
+        font-size: 24px;
+      }
     }
 
     &.shaka-overflow-menu-button {
-      font-size: 24px !important;
       position: relative;
+
+      .material-svg-icon {
+        font-size: 24px;
+      }
     }
 
     &:hover {

ui/less/overflow_menu.less

@@ -74,7 +74,7 @@
 
   /* These are the elements which contain the material design icons.
    * TODO: Pull MD icon details out of JS. */
-  i {
+  .material-svg-icon {
     /* TODO(b/116651454): eliminate hard-coded offsets */
     padding-left: 0;
     padding-right: 10px;
@@ -203,7 +203,7 @@
   }
 
   /* The MD icon for the "back" arrow. */
-  i {
+  .material-svg-icon {
     /* TODO(b/116651454): eliminate hard-coded offsets */
     padding-right: 10px;
     font-size: 18px !important;

ui/loop_button.js

@@ -13,6 +13,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -39,11 +40,9 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
     this.button_.classList.add('shaka-loop-button');
     this.button_.classList.add('shaka-tooltip');
 
-    /** @private {!HTMLElement} */
-    this.icon_ = shaka.util.Dom.createHTMLElement('i');
-    this.icon_.classList.add('material-icons-round');
-    this.icon_.textContent = shaka.ui.Enums.MaterialDesignIcons.LOOP;
-    this.button_.appendChild(this.icon_);
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons.LOOP);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -157,7 +156,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
    */
   updateLocalizedStrings_() {
     const LocIds = shaka.ui.Locales.Ids;
-    const Icons = shaka.ui.Enums.MaterialDesignIcons;
+    const Icons = shaka.ui.Enums.MaterialDesignSVGIcons;
 
     this.nameSpan_.textContent =
         this.localization.resolve(LocIds.LOOP);
@@ -166,9 +165,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
 
     this.currentState_.textContent = this.localization.resolve(labelText);
 
-    const icon = this.video.loop ? Icons.UNLOOP : Icons.LOOP;
-
-    this.icon_.textContent = icon;
+    this.icon_.use(this.video.loop ? Icons.UNLOOP : Icons.LOOP);
 
     const ariaText = this.video.loop ?
         LocIds.EXIT_LOOP_MODE : LocIds.ENTER_LOOP_MODE;

ui/material_svg_icon.js

@@ -14,9 +14,10 @@ goog.require('shaka.util.Dom');
  */
 shaka.ui.MaterialSVGIcon = class {
   /**
-   * @param {?HTMLElement} parent
+   * @param {?Element} parent
+   * @param {?string=} icon
    */
-  constructor(parent) {
+  constructor(parent, icon) {
     this.parent = parent;
 
     /** @private {!SVGElement} */
@@ -28,6 +29,10 @@ shaka.ui.MaterialSVGIcon = class {
     this.svg_.classList.add('material-svg-icon');
     this.svg_.setAttribute('viewBox', '0 -960 960 960');
 
+    if (icon) {
+      this.use(icon);
+    }
+
     this.svg_.appendChild(this.path_);
 
     if (this.parent) {
@@ -40,7 +45,9 @@ shaka.ui.MaterialSVGIcon = class {
    * @export
    */
   use(icon) {
-    this.path_.setAttribute('d', icon);
+    if (icon && typeof icon == 'string') {
+      this.path_.setAttribute('d', icon);
+    }
   }
 
   /**

ui/mute_button.js

@@ -14,6 +14,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -38,11 +39,9 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
     this.button_.classList.add('shaka-mute-button');
     this.button_.classList.add('shaka-tooltip');
 
-    /** @private {!HTMLElement} */
-    this.icon_ = shaka.util.Dom.createHTMLElement('i');
-    this.icon_.classList.add('material-icons-round');
-    this.icon_.textContent = shaka.ui.Enums.MaterialDesignIcons.MUTE;
-    this.button_.appendChild(this.icon_);
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons.MUTE);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -167,7 +166,7 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
    * @private
    */
   updateIcon_() {
-    const Icons = shaka.ui.Enums.MaterialDesignIcons;
+    const Icons = shaka.ui.Enums.MaterialDesignSVGIcons;
     let icon;
     if (this.ad) {
       icon = this.ad.isMuted() ? Icons.UNMUTE : Icons.MUTE;
@@ -175,7 +174,7 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
       icon = (this.video.muted || this.video.volume == 0) ?
           Icons.UNMUTE : Icons.MUTE;
     }
-    this.icon_.textContent = icon;
+    this.icon_.use(icon);
   }
 
   /** @private */

ui/overflow_menu.js

@@ -15,6 +15,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.Iterables');
@@ -166,10 +167,9 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
     this.overflowMenuButton_ = shaka.util.Dom.createButton();
     this.overflowMenuButton_.classList.add('shaka-overflow-menu-button');
     this.overflowMenuButton_.classList.add('shaka-no-propagation');
-    this.overflowMenuButton_.classList.add('material-icons-round');
     this.overflowMenuButton_.classList.add('shaka-tooltip');
-    this.overflowMenuButton_.textContent =
-      shaka.ui.Enums.MaterialDesignIcons.OPEN_OVERFLOW;
+    new shaka.ui.MaterialSVGIcon(this.overflowMenuButton_).use(
+        shaka.ui.Enums.MaterialDesignSVGIcons.OPEN_OVERFLOW);
     const markEl = shaka.util.Dom.createHTMLElement('span');
     markEl.classList.add('shaka-overflow-quality-mark');
     markEl.style.display = 'none';

ui/pip_button.js

@@ -13,6 +13,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -44,11 +45,9 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     this.pipButton_.classList.add('shaka-pip-button');
     this.pipButton_.classList.add('shaka-tooltip');
 
-    /** @private {!HTMLElement} */
-    this.pipIcon_ = shaka.util.Dom.createHTMLElement('i');
-    this.pipIcon_.classList.add('material-icons-round');
-    this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
-    this.pipButton_.appendChild(this.pipIcon_);
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.pipIcon_ = new shaka.ui.MaterialSVGIcon(this.pipButton_,
+        shaka.ui.Enums.MaterialDesignSVGIcons.PIP);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -127,7 +126,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
   /** @private */
   onEnterPictureInPicture_() {
     const LocIds = shaka.ui.Locales.Ids;
-    this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.EXIT_PIP;
+    this.pipIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.EXIT_PIP);
     this.pipButton_.ariaLabel =
         this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE);
     this.currentPipState_.textContent =
@@ -138,7 +137,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
   /** @private */
   onLeavePictureInPicture_() {
     const LocIds = shaka.ui.Locales.Ids;
-    this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
+    this.pipIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.PIP);
     this.pipButton_.ariaLabel =
         this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE);
     this.currentPipState_.textContent =

ui/play_button.js

@@ -12,6 +12,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.util.Dom');
 goog.requireType('shaka.ui.Controls');
 
@@ -33,6 +34,9 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
     this.button = shaka.util.Dom.createButton();
     this.parent.appendChild(this.button);
 
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button);
+
     const LOCALE_UPDATED = shaka.ui.Localization.LOCALE_UPDATED;
     this.eventManager.listen(this.localization, LOCALE_UPDATED, () => {
       this.updateAriaLabel();
@@ -139,11 +143,11 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
    * To be overridden by subclasses.
    */
   updateIcon() {
-    const Icons = shaka.ui.Enums.MaterialDesignIcons;
+    const Icons = shaka.ui.Enums.MaterialDesignSVGIcons;
     if (this.isEnded() && this.video.duration) {
-      this.button.textContent = Icons.REPLAY;
+      this.icon_.use(Icons.REPLAY);
     } else {
-      this.button.textContent = this.isPaused() ? Icons.PLAY : Icons.PAUSE;
+      this.icon_.use(this.isPaused() ? Icons.PLAY : Icons.PAUSE);
     }
   }
 };

ui/playback_rate_selection.js

@@ -28,7 +28,8 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.PLAYBACK_RATE);
+    super(parent, controls,
+        shaka.ui.Enums.MaterialDesignSVGIcons.PLAYBACK_RATE);
 
     this.button.classList.add('shaka-playbackrate-button');
     this.menu.classList.add('shaka-playback-rates');
@@ -85,7 +86,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
     const rate = this.player.getPlaybackRate();
     // Remove the old checkmark icon and related tags and classes if it exists.
     const checkmarkIcon = shaka.ui.Utils.getDescendantIfExists(
-        this.menu, 'material-icons-round shaka-chosen-item');
+        this.menu, 'shaka-chosen-item');
     if (checkmarkIcon) {
       const previouslySelectedButton = checkmarkIcon.parentElement;
       previouslySelectedButton.removeAttribute('aria-selected');

ui/recenter_vr.js

@@ -12,6 +12,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -37,12 +38,9 @@ shaka.ui.RecenterVRButton = class extends shaka.ui.Element {
     this.recenterVRButton_.classList.add('shaka-tooltip');
     this.recenterVRButton_.ariaPressed = 'false';
 
-    /** @private {!HTMLElement} */
-    this.recenterVRIcon_ = shaka.util.Dom.createHTMLElement('i');
-    this.recenterVRIcon_.classList.add('material-icons-round');
-    this.recenterVRIcon_.textContent =
-        shaka.ui.Enums.MaterialDesignIcons.RECENTER_VR;
-    this.recenterVRButton_.appendChild(this.recenterVRIcon_);
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.recenterVRIcon_ = new shaka.ui.MaterialSVGIcon(this.recenterVRButton_,
+        shaka.ui.Enums.MaterialDesignSVGIcons.RECENTER_VR);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');

ui/remote_button.js

@@ -14,6 +14,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -42,13 +43,11 @@ shaka.ui.RemoteButton = class extends shaka.ui.Element {
     this.remoteButton_.classList.add('shaka-tooltip');
     this.remoteButton_.ariaPressed = 'false';
 
-    /** @private {!HTMLElement} */
-    this.remoteIcon_ = shaka.util.Dom.createHTMLElement('i');
-    this.remoteIcon_.classList.add('material-icons-round');
-    this.remoteIcon_.textContent = this.isAirPlay_ ?
-        shaka.ui.Enums.MaterialDesignIcons.AIRPLAY :
-        shaka.ui.Enums.MaterialDesignIcons.CAST;
-    this.remoteButton_.appendChild(this.remoteIcon_);
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.remoteIcon_ = new shaka.ui.MaterialSVGIcon(this.remoteButton_,
+        this.isAirPlay_ ?
+          shaka.ui.Enums.MaterialDesignSVGIcons.AIRPLAY :
+          shaka.ui.Enums.MaterialDesignSVGIcons.CAST);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -207,11 +206,9 @@ shaka.ui.RemoteButton = class extends shaka.ui.Element {
       return;
     }
     if (this.video.remote.state == 'disconnected') {
-      this.remoteIcon_.textContent =
-          shaka.ui.Enums.MaterialDesignIcons.CAST;
+      this.remoteIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.CAST);
     } else {
-      this.remoteIcon_.textContent =
-          shaka.ui.Enums.MaterialDesignIcons.EXIT_CAST;
+      this.remoteIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.EXIT_CAST);
     }
   }
 };

ui/resolution_selection.js

@@ -34,7 +34,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.RESOLUTION);
+    super(parent, controls, shaka.ui.Enums.MaterialDesignSVGIcons.RESOLUTION);
 
     this.button.classList.add('shaka-resolution-button');
     this.button.classList.add('shaka-tooltip-status');

ui/rewind_button.js

@@ -12,6 +12,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.util.Dom');
 
 
@@ -30,13 +31,15 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
 
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
-    this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-rewind-button');
     this.button_.classList.add('shaka-tooltip-status');
     this.button_.setAttribute('shaka-status',
         this.localization.resolve(shaka.ui.Locales.Ids.OFF));
-    this.button_.textContent =
-      shaka.ui.Enums.MaterialDesignIcons.REWIND;
+
+    new shaka.ui.MaterialSVGIcon(this.button_).use(
+        shaka.ui.Enums.MaterialDesignSVGIcons.REWIND,
+    );
+
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();
 

ui/save_video_frame_button.js

@@ -15,6 +15,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -42,11 +43,9 @@ shaka.ui.SaveVideoFrameButton = class extends shaka.ui.Element {
     this.button_.classList.add('shaka-save.video-frame-button');
     this.button_.classList.add('shaka-tooltip');
 
-    /** @private {!HTMLElement} */
-    this.icon_ = shaka.util.Dom.createHTMLElement('i');
-    this.icon_.classList.add('material-icons-round');
-    this.icon_.textContent = shaka.ui.Enums.MaterialDesignIcons.DOWNLOAD;
-    this.button_.appendChild(this.icon_);
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons.DOWNLOAD);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');

ui/settings_menu.js

@@ -9,6 +9,7 @@ goog.provide('shaka.ui.SettingsMenu');
 
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.FakeEvent');
@@ -80,11 +81,8 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     this.button = shaka.util.Dom.createButton();
     this.button.classList.add('shaka-overflow-button');
 
-    /** @protected {!HTMLElement}*/
-    this.icon = shaka.util.Dom.createHTMLElement('i');
-    this.icon.classList.add('material-icons-round');
-    this.icon.textContent = iconText;
-    this.button.appendChild(this.icon);
+    /** @protected {!shaka.ui.MaterialSVGIcon}*/
+    this.icon = new shaka.ui.MaterialSVGIcon(this.button, iconText);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -122,10 +120,9 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
       this.controls.hideSettingsMenus();
     });
 
-    const backIcon = shaka.util.Dom.createHTMLElement('i');
-    backIcon.classList.add('material-icons-round');
-    backIcon.textContent = shaka.ui.Enums.MaterialDesignIcons.CLOSE;
-    this.backButton.appendChild(backIcon);
+    /** @private {shaka.ui.MaterialSVGIcon} */
+    this.backIcon_ = new shaka.ui.MaterialSVGIcon(this.backButton,
+        shaka.ui.Enums.MaterialDesignSVGIcons.CLOSE);
 
     /** @protected {!HTMLElement}*/
     this.backSpan = shaka.util.Dom.createHTMLElement('span');
@@ -141,8 +138,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     // inside of the overflow menu, that option must be replaced with a
     // "Back" arrow that returns the user to the main menu.
     if (this.parent.classList.contains('shaka-overflow-menu')) {
-      this.backButton.firstChild.textContent =
-            shaka.ui.Enums.MaterialDesignIcons.BACK;
+      this.backIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.BACK);
 
       this.eventManager.listen(this.menu, 'click', () => {
         shaka.ui.Utils.setDisplay(this.menu, false);

ui/skip_next_button.js

@@ -12,6 +12,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
 
@@ -38,9 +39,9 @@ shaka.ui.SkipNextButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-skip-next-button');
-    this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-tooltip');
-    this.button_.textContent = shaka.ui.Enums.MaterialDesignIcons.SKIP_NEXT;
+    new shaka.ui.MaterialSVGIcon(this.button_).use(
+        shaka.ui.Enums.MaterialDesignSVGIcons.SKIP_NEXT);
     this.parent.appendChild(this.button_);
 
     this.updateAriaLabel_();

ui/skip_previous_button.js

@@ -12,6 +12,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
 
@@ -38,9 +39,9 @@ shaka.ui.SkipPreviousButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-skip-previous-button');
-    this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-tooltip');
-    this.button_.textContent = shaka.ui.Enums.MaterialDesignIcons.SKIP_PREVIOUS;
+    new shaka.ui.MaterialSVGIcon(this.button_).use(
+        shaka.ui.Enums.MaterialDesignSVGIcons.SKIP_PREVIOUS);
     this.parent.appendChild(this.button_);
 
     this.updateAriaLabel_();

ui/small_play_button.js

@@ -25,7 +25,6 @@ shaka.ui.SmallPlayButton = class extends shaka.ui.PlayButton {
     super(parent, controls);
 
     this.button.classList.add('shaka-small-play-button');
-    this.button.classList.add('material-icons-round');
     this.button.classList.add('shaka-tooltip');
   }
 };

ui/statistics_button.js

@@ -14,6 +14,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -38,12 +39,9 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-statistics-button');
 
-    /** @private {!HTMLElement} */
-    this.icon_ = shaka.util.Dom.createHTMLElement('i');
-    this.icon_.classList.add('material-icons-round');
-    this.icon_.textContent =
-      shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
-    this.button_.appendChild(this.icon_);
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -199,13 +197,11 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
   /** @private */
   onClick_() {
     if (this.container_.classList.contains('shaka-hidden')) {
-      this.icon_.textContent =
-          shaka.ui.Enums.MaterialDesignIcons.STATISTICS_OFF;
+      this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_OFF);
       this.timer_.tickEvery(0.1);
       shaka.ui.Utils.setDisplay(this.container_, true);
     } else {
-      this.icon_.textContent =
-          shaka.ui.Enums.MaterialDesignIcons.STATISTICS_ON;
+      this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON);
       this.timer_.stop();
       shaka.ui.Utils.setDisplay(this.container_, false);
     }
@@ -251,15 +247,12 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
     const closeElement = shaka.util.Dom.createHTMLElement('div');
     closeElement.classList.add('shaka-no-propagation');
     closeElement.classList.add('shaka-statistics-close');
-    const icon = shaka.util.Dom.createHTMLElement('i');
-    icon.classList.add('material-icons');
-    icon.classList.add('notranslate');
-    icon.classList.add('material-icons-round');
-    icon.textContent =
-      shaka.ui.Enums.MaterialDesignIcons.CLOSE;
-    closeElement.appendChild(icon);
+    const icon = new shaka.ui.MaterialSVGIcon(closeElement,
+        shaka.ui.Enums.MaterialDesignSVGIcons.CLOSE);
+    const iconElement = icon.getSvgElement();
+    iconElement.classList.add('material-icons', 'notranslate');
     this.container_.appendChild(closeElement);
-    this.eventManager.listen(icon, 'click', () => {
+    this.eventManager.listen(iconElement, 'click', () => {
       this.onClick_();
     });
     for (const name of this.controls.getConfig().statisticsList) {

ui/text_selection.js

@@ -32,7 +32,7 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
    */
   constructor(parent, controls) {
     super(parent,
-        controls, shaka.ui.Enums.MaterialDesignIcons.CLOSED_CAPTIONS);
+        controls, shaka.ui.Enums.MaterialDesignSVGIcons.CLOSED_CAPTIONS);
 
     this.button.classList.add('shaka-caption-button');
     this.button.classList.add('shaka-tooltip-status');
@@ -122,12 +122,10 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
   /** @private */
   onCaptionStateChange_() {
     if (this.player.isTextTrackVisible()) {
-      this.icon.textContent =
-          shaka.ui.Enums.MaterialDesignIcons.CLOSED_CAPTIONS;
+      this.icon.use(shaka.ui.Enums.MaterialDesignSVGIcons.CLOSED_CAPTIONS);
       this.button.ariaPressed = 'true';
     } else {
-      this.icon.textContent =
-          shaka.ui.Enums.MaterialDesignIcons.CLOSED_CAPTIONS_OFF;
+      this.icon.use(shaka.ui.Enums.MaterialDesignSVGIcons.CLOSED_CAPTIONS_OFF);
       this.button.ariaPressed = 'false';
     }
 

ui/toggle_stereoscopic.js

@@ -12,6 +12,7 @@ goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
@@ -38,12 +39,10 @@ shaka.ui.ToggleStereoscopicButton = class extends shaka.ui.Element {
     this.toggleStereoscopicButton_.classList.add('shaka-tooltip');
     this.toggleStereoscopicButton_.ariaPressed = 'false';
 
-    /** @private {!HTMLElement} */
-    this.toggleStereoscopicIcon_ = shaka.util.Dom.createHTMLElement('i');
-    this.toggleStereoscopicIcon_.classList.add('material-icons-round');
-    this.toggleStereoscopicIcon_.textContent =
-        shaka.ui.Enums.MaterialDesignIcons.TOGGLE_STEREOSCOPIC;
-    this.toggleStereoscopicButton_.appendChild(this.toggleStereoscopicIcon_);
+    /** @private {!shaka.ui.MaterialSVGIcon} */
+    this.toggleStereoscopicIcon_ = new shaka.ui.MaterialSVGIcon(
+        this.toggleStereoscopicButton_,
+        shaka.ui.Enums.MaterialDesignSVGIcons.TOGGLE_STEREOSCOPIC);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');

ui/ui_utils.js

@@ -9,7 +9,7 @@ goog.provide('shaka.ui.Utils');
 
 goog.require('goog.asserts');
 goog.require('shaka.ui.Enums');
-goog.require('shaka.util.Dom');
+goog.require('shaka.ui.MaterialSVGIcon');
 
 
 shaka.ui.Utils = class {
@@ -62,16 +62,16 @@ shaka.ui.Utils = class {
 
 
   /**
-   * @return {!Element}
+   * @return {!SVGElement}
    */
   static checkmarkIcon() {
-    const icon = shaka.util.Dom.createHTMLElement('i');
-    icon.classList.add('material-icons-round');
-    icon.classList.add('shaka-chosen-item');
-    icon.textContent = shaka.ui.Enums.MaterialDesignIcons.CHECKMARK;
+    const icon = new shaka.ui.MaterialSVGIcon(null,
+        shaka.ui.Enums.MaterialDesignSVGIcons.CHECKMARK);
+    const iconElement = icon.getSvgElement();
+    iconElement.classList.add('shaka-chosen-item');
     // Screen reader should ignore icon text.
-    icon.ariaHidden = 'true';
-    return icon;
+    iconElement.ariaHidden = 'true';
+    return iconElement;
   }