feat(UI): Ability to change UI icons (#9115)

## How to register a custom icon?

**Icons need to be registered before initializing the player.**

Register a custom icon from  Material Symbols:

```js
shaka.ui.IconRegistry.register('<PATH_VALUE>');
```

Register a custom Icon from any icon set:

```js
shaka.ui.IconRegistry.register('<NAME>', {
  path: '<PATH_VALUE>',
  viewBox: '<VIEW_BOX>',
  size:  24, // optional
});
```

Register a custom Icon (that contains multiple paths) from any icon set:

```js
shaka.ui.IconRegistry.register('<NAME>', {
  path: ['<PATH_VALUE_1>', '<PATH_VALUE_2>'],
  viewBox: '<VIEW_BOX>',
  size:  24, // optional
});
```

Register a custom Icon using URL of the icon:

```js
shaka.ui.IconRegistry.register('<NAME>', {
  url: '<URL>',
  size:  24, // optional
});
```

Closes: #9045

---------

Co-authored-by: Álvaro Velad Galván <ladvan91@hotmail.com>

build/types/ui

@@ -19,10 +19,11 @@
 +../../ui/hidden_fast_forward_button.js
 +../../ui/hidden_rewind_button.js
 +../../ui/hidden_seek_button.js
++../../ui/icon.js
++../../ui/icon_registry.js
 +../../ui/language_utils.js
 +../../ui/localization.js
 +../../ui/loop_button.js
-+../../ui/material_svg_icon.js
 +../../ui/mute_button.js
 +../../ui/overflow_menu.js
 +../../ui/pip_button.js

demo/close_button.js

@@ -26,7 +26,7 @@ shakaDemo.CloseButton = class extends shaka.ui.Element {
     this.button_.classList.add('shaka-no-propagation');
     this.button_.classList.add('close-button');
 
-    new shaka.ui.MaterialSVGIcon(this.button_).use(
+    new shaka.ui.Icon(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',
     );

demo/visualizer_button.js

@@ -27,9 +27,9 @@ shakaDemo.VisualizerButton = class extends shaka.ui.Element {
     this.button_.classList.add('shaka-pip-button');
     this.button_.classList.add('shaka-tooltip');
 
-    /** @private {!shaka.ui.MaterialSVGIcon} */
-    this.icon_ = /** @type {!shaka.ui.MaterialSVGIcon} */ (
-      new shaka.ui.MaterialSVGIcon(this.button_));
+    /** @private {!shaka.ui.Icon} */
+    this.icon_ = /** @type {!shaka.ui.Icon} */ (
+      new shaka.ui.Icon(this.button_));
     this.setIcon_();
 
     const label = document.createElement('label');

shaka-player.uncompiled.js

@@ -105,6 +105,7 @@ goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.FastForwardButton');
 goog.require('shaka.ui.FullscreenButton');
+goog.require('shaka.ui.IconRegistry');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.LoopButton');
 goog.require('shaka.ui.Matrix4x4');

ui/ad_statistics_button.js

@@ -13,9 +13,9 @@ goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
@@ -40,9 +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 {!shaka.ui.MaterialSVGIcon} */
-    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
-        shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON);
+    /** @private {!shaka.ui.Icon} */
+    this.icon_ = new shaka.ui.Icon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_ON']);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -146,11 +146,11 @@ shaka.ui.AdStatisticsButton = class extends shaka.ui.Element {
   /** @private */
   onClick_() {
     if (this.container_.classList.contains('shaka-hidden')) {
-      this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.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_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON);
+      this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_ON']);
       this.timer_.stop();
       shaka.ui.Utils.setDisplay(this.container_, false);
     }
@@ -196,8 +196,8 @@ 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 = new shaka.ui.MaterialSVGIcon(closeElement,
-        shaka.ui.Enums.MaterialDesignSVGIcons.CLOSE);
+    const icon = new shaka.ui.Icon(closeElement,
+        shaka.ui.Enums.MaterialDesignSVGIcons['CLOSE']);
     const iconElement = icon.getSvgElement();
     iconElement.classList.add('material-icons', 'notranslate');
 

ui/airplay_button.js

@@ -12,9 +12,9 @@ goog.require('shaka.Player');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
@@ -40,8 +40,8 @@ shaka.ui.AirPlayButton = class extends shaka.ui.Element {
     this.airplayButton_.classList.add('shaka-tooltip');
     this.airplayButton_.ariaPressed = 'false';
 
-    new shaka.ui.MaterialSVGIcon(this.airplayButton_).use(
-        shaka.ui.Enums.MaterialDesignSVGIcons.AIRPLAY);
+    new shaka.ui.Icon(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.MaterialDesignSVGIcons.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

@@ -11,9 +11,9 @@ goog.require('shaka.cast.CastProxy');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
@@ -45,9 +45,9 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
     this.castButton_.classList.add('shaka-tooltip');
     this.castButton_.ariaPressed = 'false';
 
-    /** @private {!shaka.ui.MaterialSVGIcon} */
-    this.castIcon_ = new shaka.ui.MaterialSVGIcon(this.castButton_,
-        shaka.ui.Enums.MaterialDesignSVGIcons.CAST);
+    /** @private {!shaka.ui.Icon} */
+    this.castIcon_ = new shaka.ui.Icon(this.castButton_,
+        shaka.ui.Enums.MaterialDesignSVGIcons['CAST']);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -121,7 +121,7 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
     const isCasting = this.castProxy_.isCasting();
     const Icons = shaka.ui.Enums.MaterialDesignSVGIcons;
     shaka.ui.Utils.setDisplay(this.castButton_, canCast);
-    this.castIcon_.use(isCasting ? Icons.EXIT_CAST : Icons.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.MaterialDesignSVGIcons.CHAPTER);
+    super(parent, controls, shaka.ui.Enums.MaterialDesignSVGIcons['CHAPTER']);
 
     this.button.classList.add('shaka-chapter-button');
     this.menu.classList.add('shaka-chapters');

ui/enums.js

@@ -13,7 +13,7 @@ goog.provide('shaka.ui.Enums');
  *
  * Url used to fetch following svg icons
  * https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsrounded/<icon>/fill1/24px.svg
- * @enum {string}
+ * @export
  */
 /* eslint @stylistic/max-len: ["error", { "code": 1000 }] */
 shaka.ui.Enums.MaterialDesignSVGIcons = {

ui/externs/ui.js

@@ -562,7 +562,7 @@ shaka.extern.IUISettingsMenu = class {
     this.button;
 
     /**
-     * @protected {!shaka.ui.MaterialSVGIcon}
+     * @protected {!shaka.ui.Icon}
      * @exportDoc
      */
     this.icon;
@@ -664,3 +664,27 @@ shaka.extern.IUIPlayButton = class {
   /** @return {boolean} */
   isEnded() {}
 };
+
+/**
+ * @typedef {{
+ *   path: ?(string | Array<string>),
+ *   viewBox: ?string,
+ *   url: ?string,
+ *   size: ?number,
+ * }}
+ *
+ * @property {?(string | Array<string>)} path
+ *   A single SVG path string or an array of multiple path strings.
+ *   Used to define the shape(s) of the SVG icon.
+ * @property {?string} viewBox
+ *   The `viewBox` attribute for the SVG element.
+ *   Defaults to `'0 -960 960 960'` if not specified.
+ * @property {?string} url
+ *   The URL of an external SVG icon.
+ *   If this is defined, `viewBox` and `path` will be ignored.
+ * @property {?number} size
+ *   Custom size for the icon in pixels.
+ *   If not provided, the size will be controlled via CSS.
+ * @exportDoc
+ */
+shaka.extern.UIIcon;

ui/fast_forward_button.js

@@ -10,9 +10,9 @@ goog.provide('shaka.ui.FastForwardButton');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
-goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.util.Dom');
 
 
@@ -35,8 +35,8 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
     this.button_.classList.add('shaka-tooltip-status');
     this.button_.setAttribute('shaka-status', '1x');
 
-    new shaka.ui.MaterialSVGIcon(this.button_).use(
-        shaka.ui.Enums.MaterialDesignSVGIcons.FAST_FORWARD);
+    new shaka.ui.Icon(this.button_).use(
+        shaka.ui.Enums.MaterialDesignSVGIcons['FAST_FORWARD']);
 
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();

ui/fullscreen_button.js

@@ -11,9 +11,9 @@ goog.require('shaka.ads.Utils');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
-goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.util.Dom');
 
 
@@ -38,9 +38,9 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
     this.button_.classList.add('shaka-fullscreen-button');
     this.button_.classList.add('shaka-tooltip');
 
-    /** @private {shaka.ui.MaterialSVGIcon} */
-    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
-        shaka.ui.Enums.MaterialDesignSVGIcons.FULLSCREEN);
+    /** @private {shaka.ui.Icon} */
+    this.icon_ = new shaka.ui.Icon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons['FULLSCREEN']);
 
     this.checkSupport_();
 
@@ -114,8 +114,8 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
    */
   updateIcon_() {
     this.icon_.use(this.controls.isFullScreenEnabled() ?
-      shaka.ui.Enums.MaterialDesignSVGIcons.EXIT_FULLSCREEN :
-      shaka.ui.Enums.MaterialDesignSVGIcons.FULLSCREEN,
+      shaka.ui.Enums.MaterialDesignSVGIcons['EXIT_FULLSCREEN'] :
+      shaka.ui.Enums.MaterialDesignSVGIcons['FULLSCREEN'],
     );
   }
 };

ui/hidden_fast_forward_button.js

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

ui/hidden_rewind_button.js

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

ui/hidden_seek_button.js

@@ -7,7 +7,7 @@
 goog.provide('shaka.ui.HiddenSeekButton');
 
 goog.require('shaka.ui.Element');
-goog.require('shaka.ui.MaterialSVGIcon');
+goog.require('shaka.ui.Icon');
 goog.require('shaka.util.Timer');
 goog.require('shaka.util.Dom');
 
@@ -71,8 +71,8 @@ shaka.ui.HiddenSeekButton = class extends shaka.ui.Element {
     this.seekValue_.textContent = '0s';
     this.seekContainer.appendChild(this.seekValue_);
 
-    /** @protected {!shaka.ui.MaterialSVGIcon} */
-    this.seekIcon = new shaka.ui.MaterialSVGIcon(this.seekContainer);
+    /** @protected {!shaka.ui.Icon} */
+    this.seekIcon = new shaka.ui.Icon(this.seekContainer);
     this.seekIcon.getSvgElement().classList.add(
         'shaka-forward-rewind-container-icon');
 

ui/icon.js

@@ -0,0 +1,127 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.provide('shaka.ui.Icon');
+
+goog.require('shaka.util.Dom');
+
+/**
+ * @final
+ * @export
+ */
+shaka.ui.Icon = class {
+  /**
+   * @param {?Element} parent
+   * @param {?(shaka.extern.UIIcon | string)=} icon
+   */
+  constructor(parent, icon) {
+    this.parent = parent;
+
+    /** @private {!SVGElement} */
+    this.svg_ = shaka.util.Dom.createSVGElement('svg');
+
+    this.svg_.classList.add('shaka-ui-icon');
+    this.svg_.setAttribute('viewBox', '0 -960 960 960');
+
+    if (icon) {
+      this.use(icon);
+    }
+
+    if (this.parent) {
+      parent.appendChild(this.svg_);
+    }
+  }
+
+  /**
+   * If a single string is passed, it is treated as an SVG path
+   * @param {shaka.extern.UIIcon | string} icon
+   * @export
+   */
+  use(icon) {
+    // check if it is empty string or null or undefined
+    if (!icon) {
+      return;
+    }
+
+    // remove all previous path elements
+    this.emptyChildNodes_();
+
+    if (typeof icon == 'string') {
+      this.svg_.style.setProperty('font-size', '');
+      this.applyInlinedSVG_(icon, null);
+    } else if (typeof icon == 'object') {
+      const url = icon['url'];
+      const path = icon['path'];
+      const viewBox = icon['viewBox'];
+      const size = icon['size'];
+
+      this.svg_.style.setProperty('font-size', size ? size + 'px': '');
+
+      if (url) {
+        // let handle the background-color (icon color) by CSS
+        this.svg_.style.setProperty('background-color', '');
+        this.svg_.style.setProperty('mask-image', `url("${url}")`);
+      } else if (path) {
+        this.applyInlinedSVG_(path, viewBox);
+      }
+    }
+  }
+
+  /**
+   * @return {!SVGElement}
+   * @export
+   */
+  getSvgElement() {
+    return this.svg_;
+  }
+
+
+  /**
+   * @param {string | Array<string>} path
+   * @param {?string} viewBox
+   * @private
+   */
+  applyInlinedSVG_(path, viewBox) {
+    // do not need a background color if mask-image isn't using
+    this.svg_.style.setProperty('background-color', 'transparent');
+    this.svg_.style.setProperty('mask-image', '');
+    this.svg_.setAttribute('viewBox', viewBox || '0 -960 960 960');
+
+    if (Array.isArray(path)) {
+      for (let i = 0, l = path.length; i < l; i++) {
+        this.addPath_(path[i]);
+      }
+    } else if (path) {
+      this.addPath_(path);
+    }
+  }
+
+  /**
+   * Add a path element, call `emptyChildNodes()` first to clean previous
+   * path elements.
+   * @param {string} path
+   * @private
+   */
+  addPath_(path) {
+    const el = shaka.util.Dom.createSVGElement('path');
+    el.setAttribute('d', path);
+    this.svg_.appendChild(el);
+  }
+
+  /**
+   * Remove all the child nodes from svg element
+   * @private
+   */
+  emptyChildNodes_() {
+    const childNodes = this.svg_.childNodes;
+    for (let i = 0, l = childNodes.length, child; i < l; i++) {
+      child = childNodes[i];
+      if (child instanceof SVGPathElement) {
+        child.remove();
+      }
+    }
+  }
+};

ui/icon_registry.js

@@ -0,0 +1,29 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.provide('shaka.ui.IconRegistry');
+
+goog.require('shaka.ui.Enums');
+
+/**
+ * @final
+ * @export
+ */
+shaka.ui.IconRegistry = class IconRegistry {
+  /**
+   * Register custom icon for UI control elements
+   * If a single string is passed, it is treated as an SVG path
+   * @param {string} name
+   * @param {shaka.extern.UIIcon | string} icon
+   * @export
+   */
+  static register(name, icon) {
+    if (typeof icon === 'object' || typeof icon == 'string') {
+      shaka.ui.Enums.MaterialDesignSVGIcons[name] = icon;
+    }
+  }
+};
+

ui/less/containers.less

@@ -16,7 +16,7 @@
   display: flex;
 
   /* Set a special font for material design icons. */
-  .material-svg-icon {
+  .shaka-ui-icon {
     font-size: 24px;
   }
 
@@ -201,13 +201,13 @@
     &.shaka-small-play-button,
     &.shaka-skip-previous-button,
     &.shaka-skip-next-button {
-      .material-svg-icon {
+      .shaka-ui-icon {
         font-size: 32px;
       }
     }
 
     &.shaka-fullscreen-button {
-      .material-svg-icon {
+      .shaka-ui-icon {
         font-size: 24px;
       }
     }
@@ -215,7 +215,7 @@
     &.shaka-overflow-menu-button {
       position: relative;
 
-      .material-svg-icon {
+      .shaka-ui-icon {
         font-size: 24px;
       }
     }

ui/less/material_svg_icon.less

@@ -1,6 +1,10 @@
-.material-svg-icon {
+.shaka-ui-icon {
   display: inline-block;
+  background-color: currentcolor;
   fill: currentcolor;
+  mask-position: left top;
+  mask-repeat: no-repeat;
+  mask-size: 1em 1em;
   width: 1em;
   height: 1em;
 }

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. */
-  .material-svg-icon {
+  .shaka-ui-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. */
-  .material-svg-icon {
+  .shaka-ui-icon {
     /* TODO(b/116651454): eliminate hard-coded offsets */
     padding-right: 10px;
     font-size: 18px !important;

ui/loop_button.js

@@ -11,9 +11,9 @@ goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
@@ -40,9 +40,9 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
     this.button_.classList.add('shaka-loop-button');
     this.button_.classList.add('shaka-tooltip');
 
-    /** @private {!shaka.ui.MaterialSVGIcon} */
-    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
-        shaka.ui.Enums.MaterialDesignSVGIcons.LOOP);
+    /** @private {!shaka.ui.Icon} */
+    this.icon_ = new shaka.ui.Icon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons['LOOP']);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -165,7 +165,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
 
     this.currentState_.textContent = this.localization.resolve(labelText);
 
-    this.icon_.use(this.video.loop ? Icons.UNLOOP : Icons.LOOP);
+    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

@@ -1,60 +0,0 @@
-/*! @license
- * Shaka Player
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-goog.provide('shaka.ui.MaterialSVGIcon');
-
-goog.require('shaka.util.Dom');
-
-/**
- * @final
- * @export
- */
-shaka.ui.MaterialSVGIcon = class {
-  /**
-   * @param {?Element} parent
-   * @param {?string=} icon
-   */
-  constructor(parent, icon) {
-    this.parent = parent;
-
-    /** @private {!SVGElement} */
-    this.svg_ = shaka.util.Dom.createSVGElement('svg');
-
-    /** @private {!SVGElement} */
-    this.path_ = shaka.util.Dom.createSVGElement('path');
-
-    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) {
-      parent.appendChild(this.svg_);
-    }
-  }
-
-  /**
-   * @param {string} icon
-   * @export
-   */
-  use(icon) {
-    if (icon && typeof icon == 'string') {
-      this.path_.setAttribute('d', icon);
-    }
-  }
-
-  /**
-   * @return {!SVGElement}
-   * @export
-   */
-  getSvgElement() {
-    return this.svg_;
-  }
-};

ui/mute_button.js

@@ -12,9 +12,9 @@ goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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,9 +39,9 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
     this.button_.classList.add('shaka-mute-button');
     this.button_.classList.add('shaka-tooltip');
 
-    /** @private {!shaka.ui.MaterialSVGIcon} */
-    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
-        shaka.ui.Enums.MaterialDesignSVGIcons.MUTE);
+    /** @private {!shaka.ui.Icon} */
+    this.icon_ = new shaka.ui.Icon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons['MUTE']);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -169,10 +169,10 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
     const Icons = shaka.ui.Enums.MaterialDesignSVGIcons;
     let icon;
     if (this.ad) {
-      icon = this.ad.isMuted() ? Icons.UNMUTE : Icons.MUTE;
+      icon = this.ad.isMuted() ? Icons['UNMUTE'] : Icons['MUTE'];
     } else {
       icon = (this.video.muted || this.video.volume == 0) ?
-          Icons.UNMUTE : Icons.MUTE;
+          Icons['UNMUTE'] : Icons['MUTE'];
     }
     this.icon_.use(icon);
   }

ui/overflow_menu.js

@@ -13,9 +13,9 @@ goog.require('shaka.log');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
@@ -168,8 +168,8 @@ shaka.ui.OverflowMenu = class extends shaka.ui.Element {
     this.overflowMenuButton_.classList.add('shaka-overflow-menu-button');
     this.overflowMenuButton_.classList.add('shaka-no-propagation');
     this.overflowMenuButton_.classList.add('shaka-tooltip');
-    new shaka.ui.MaterialSVGIcon(this.overflowMenuButton_).use(
-        shaka.ui.Enums.MaterialDesignSVGIcons.OPEN_OVERFLOW);
+    new shaka.ui.Icon(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

@@ -11,9 +11,9 @@ goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
@@ -45,9 +45,9 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     this.pipButton_.classList.add('shaka-pip-button');
     this.pipButton_.classList.add('shaka-tooltip');
 
-    /** @private {!shaka.ui.MaterialSVGIcon} */
-    this.pipIcon_ = new shaka.ui.MaterialSVGIcon(this.pipButton_,
-        shaka.ui.Enums.MaterialDesignSVGIcons.PIP);
+    /** @private {!shaka.ui.Icon} */
+    this.pipIcon_ = new shaka.ui.Icon(this.pipButton_,
+        shaka.ui.Enums.MaterialDesignSVGIcons['PIP']);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -126,7 +126,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
   /** @private */
   onEnterPictureInPicture_() {
     const LocIds = shaka.ui.Locales.Ids;
-    this.pipIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.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 =
@@ -137,7 +137,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
   /** @private */
   onLeavePictureInPicture_() {
     const LocIds = shaka.ui.Locales.Ids;
-    this.pipIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.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

@@ -10,9 +10,9 @@ goog.provide('shaka.ui.PlayButton');
 goog.require('shaka.ads.Utils');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
 
@@ -34,8 +34,8 @@ 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);
+    /** @private {!shaka.ui.Icon} */
+    this.icon_ = new shaka.ui.Icon(this.button);
 
     const LOCALE_UPDATED = shaka.ui.Localization.LOCALE_UPDATED;
     this.eventManager.listen(this.localization, LOCALE_UPDATED, () => {
@@ -147,7 +147,7 @@ shaka.ui.PlayButton = class extends shaka.ui.Element {
     if (this.isEnded() && this.video.duration) {
       this.icon_.use(Icons.REPLAY);
     } else {
-      this.icon_.use(this.isPaused() ? Icons.PLAY : Icons.PAUSE);
+      this.icon_.use(this.isPaused() ? Icons['PLAY'] : Icons['PAUSE']);
     }
   }
 };

ui/playback_rate_selection.js

@@ -29,7 +29,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
    */
   constructor(parent, controls) {
     super(parent, controls,
-        shaka.ui.Enums.MaterialDesignSVGIcons.PLAYBACK_RATE);
+        shaka.ui.Enums.MaterialDesignSVGIcons['PLAYBACK_RATE']);
 
     this.button.classList.add('shaka-playbackrate-button');
     this.menu.classList.add('shaka-playback-rates');
@@ -86,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-svg-icon shaka-chosen-item');
+        this.menu, 'shaka-ui-icon shaka-chosen-item');
     if (checkmarkIcon) {
       const previouslySelectedButton = checkmarkIcon.parentElement;
       previouslySelectedButton.removeAttribute('aria-selected');

ui/recenter_vr.js

@@ -10,9 +10,9 @@ goog.provide('shaka.ui.RecenterVRButton');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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,9 +38,9 @@ shaka.ui.RecenterVRButton = class extends shaka.ui.Element {
     this.recenterVRButton_.classList.add('shaka-tooltip');
     this.recenterVRButton_.ariaPressed = 'false';
 
-    /** @private {!shaka.ui.MaterialSVGIcon} */
-    this.recenterVRIcon_ = new shaka.ui.MaterialSVGIcon(this.recenterVRButton_,
-        shaka.ui.Enums.MaterialDesignSVGIcons.RECENTER_VR);
+    /** @private {!shaka.ui.Icon} */
+    this.recenterVRIcon_ = new shaka.ui.Icon(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

@@ -12,9 +12,9 @@ goog.require('shaka.device.DeviceFactory');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
@@ -43,11 +43,11 @@ shaka.ui.RemoteButton = class extends shaka.ui.Element {
     this.remoteButton_.classList.add('shaka-tooltip');
     this.remoteButton_.ariaPressed = 'false';
 
-    /** @private {!shaka.ui.MaterialSVGIcon} */
-    this.remoteIcon_ = new shaka.ui.MaterialSVGIcon(this.remoteButton_,
+    /** @private {!shaka.ui.Icon} */
+    this.remoteIcon_ = new shaka.ui.Icon(this.remoteButton_,
         this.isAirPlay_ ?
-          shaka.ui.Enums.MaterialDesignSVGIcons.AIRPLAY :
-          shaka.ui.Enums.MaterialDesignSVGIcons.CAST);
+          shaka.ui.Enums.MaterialDesignSVGIcons['AIRPLAY'] :
+          shaka.ui.Enums.MaterialDesignSVGIcons['CAST']);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -206,9 +206,9 @@ shaka.ui.RemoteButton = class extends shaka.ui.Element {
       return;
     }
     if (this.video.remote.state == 'disconnected') {
-      this.remoteIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.CAST);
+      this.remoteIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['CAST']);
     } else {
-      this.remoteIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.EXIT_CAST);
+      this.remoteIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['EXIT_CAST']);
     }
   }
 };

ui/resolution_selection.js

@@ -35,7 +35,8 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
    * @param {!shaka.ui.Controls} controls
    */
   constructor(parent, controls) {
-    super(parent, controls, shaka.ui.Enums.MaterialDesignSVGIcons.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

@@ -10,9 +10,9 @@ goog.provide('shaka.ui.RewindButton');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
-goog.require('shaka.ui.MaterialSVGIcon');
 goog.require('shaka.util.Dom');
 
 
@@ -36,9 +36,8 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
     this.button_.setAttribute('shaka-status',
         this.localization.resolve(shaka.ui.Locales.Ids.OFF));
 
-    new shaka.ui.MaterialSVGIcon(this.button_).use(
-        shaka.ui.Enums.MaterialDesignSVGIcons.REWIND,
-    );
+    new shaka.ui.Icon(this.button_).use(
+        shaka.ui.Enums.MaterialDesignSVGIcons['REWIND']);
 
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();

ui/save_video_frame_button.js

@@ -13,9 +13,9 @@ goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
@@ -43,9 +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 {!shaka.ui.MaterialSVGIcon} */
-    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
-        shaka.ui.Enums.MaterialDesignSVGIcons.DOWNLOAD);
+    /** @private {!shaka.ui.Icon} */
+    this.icon_ = new shaka.ui.Icon(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,7 +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.Icon');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
 goog.require('shaka.util.FakeEvent');
@@ -26,7 +26,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
   /**
    * @param {!HTMLElement} parent
    * @param {!shaka.ui.Controls} controls
-   * @param {string} iconText
+   * @param {shaka.extern.UIIcon | string} iconText
    */
   constructor(parent, controls, iconText) {
     super(parent, controls);
@@ -73,7 +73,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
 
 
   /**
-   * @param {string} iconText
+   * @param {shaka.extern.UIIcon | string} iconText
    * @private
    */
   addButton_(iconText) {
@@ -81,8 +81,8 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     this.button = shaka.util.Dom.createButton();
     this.button.classList.add('shaka-overflow-button');
 
-    /** @protected {!shaka.ui.MaterialSVGIcon}*/
-    this.icon = new shaka.ui.MaterialSVGIcon(this.button, iconText);
+    /** @protected {!shaka.ui.Icon}*/
+    this.icon = new shaka.ui.Icon(this.button, iconText);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -120,9 +120,9 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
       this.controls.hideSettingsMenus();
     });
 
-    /** @private {shaka.ui.MaterialSVGIcon} */
-    this.backIcon_ = new shaka.ui.MaterialSVGIcon(this.backButton,
-        shaka.ui.Enums.MaterialDesignSVGIcons.CLOSE);
+    /** @private {shaka.ui.Icon} */
+    this.backIcon_ = new shaka.ui.Icon(this.backButton,
+        shaka.ui.Enums.MaterialDesignSVGIcons['CLOSE']);
 
     /** @protected {!HTMLElement}*/
     this.backSpan = shaka.util.Dom.createHTMLElement('span');
@@ -138,7 +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.backIcon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.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

@@ -10,9 +10,9 @@ goog.provide('shaka.ui.SkipNextButton');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
 
@@ -40,8 +40,8 @@ shaka.ui.SkipNextButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-skip-next-button');
     this.button_.classList.add('shaka-tooltip');
-    new shaka.ui.MaterialSVGIcon(this.button_).use(
-        shaka.ui.Enums.MaterialDesignSVGIcons.SKIP_NEXT);
+    new shaka.ui.Icon(this.button_).use(
+        shaka.ui.Enums.MaterialDesignSVGIcons['SKIP_NEXT']);
     this.parent.appendChild(this.button_);
 
     this.updateAriaLabel_();

ui/skip_previous_button.js

@@ -10,9 +10,9 @@ goog.provide('shaka.ui.SkipPreviousButton');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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');
 
@@ -40,8 +40,8 @@ shaka.ui.SkipPreviousButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-skip-previous-button');
     this.button_.classList.add('shaka-tooltip');
-    new shaka.ui.MaterialSVGIcon(this.button_).use(
-        shaka.ui.Enums.MaterialDesignSVGIcons.SKIP_PREVIOUS);
+    new shaka.ui.Icon(this.button_).use(
+        shaka.ui.Enums.MaterialDesignSVGIcons['SKIP_PREVIOUS']);
     this.parent.appendChild(this.button_);
 
     this.updateAriaLabel_();

ui/statistics_button.js

@@ -12,9 +12,9 @@ goog.require('shaka.ui.ContextMenu');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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,9 +39,9 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-statistics-button');
 
-    /** @private {!shaka.ui.MaterialSVGIcon} */
-    this.icon_ = new shaka.ui.MaterialSVGIcon(this.button_,
-        shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON);
+    /** @private {!shaka.ui.Icon} */
+    this.icon_ = new shaka.ui.Icon(this.button_,
+        shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_ON']);
 
     const label = shaka.util.Dom.createHTMLElement('label');
     label.classList.add('shaka-overflow-button-label');
@@ -197,11 +197,11 @@ shaka.ui.StatisticsButton = class extends shaka.ui.Element {
   /** @private */
   onClick_() {
     if (this.container_.classList.contains('shaka-hidden')) {
-      this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons.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_.use(shaka.ui.Enums.MaterialDesignSVGIcons.STATISTICS_ON);
+      this.icon_.use(shaka.ui.Enums.MaterialDesignSVGIcons['STATISTICS_ON']);
       this.timer_.stop();
       shaka.ui.Utils.setDisplay(this.container_, false);
     }
@@ -247,8 +247,8 @@ 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 = new shaka.ui.MaterialSVGIcon(closeElement,
-        shaka.ui.Enums.MaterialDesignSVGIcons.CLOSE);
+    const icon = new shaka.ui.Icon(closeElement,
+        shaka.ui.Enums.MaterialDesignSVGIcons['CLOSE']);
     const iconElement = icon.getSvgElement();
     iconElement.classList.add('material-icons', 'notranslate');
     this.container_.appendChild(closeElement);

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.MaterialDesignSVGIcons.CLOSED_CAPTIONS);
+        controls, shaka.ui.Enums.MaterialDesignSVGIcons['CLOSED_CAPTIONS']);
 
     this.button.classList.add('shaka-caption-button');
     this.button.classList.add('shaka-tooltip-status');
@@ -127,10 +127,11 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
         .some((track) => track.active);
 
     if (hasTrack) {
-      this.icon.use(shaka.ui.Enums.MaterialDesignSVGIcons.CLOSED_CAPTIONS);
+      this.icon.use(shaka.ui.Enums.MaterialDesignSVGIcons['CLOSED_CAPTIONS']);
       this.button.ariaPressed = 'true';
     } else {
-      this.icon.use(shaka.ui.Enums.MaterialDesignSVGIcons.CLOSED_CAPTIONS_OFF);
+      this.icon.use(
+          shaka.ui.Enums.MaterialDesignSVGIcons['CLOSED_CAPTIONS_OFF']);
       this.button.ariaPressed = 'false';
     }
 

ui/toggle_stereoscopic.js

@@ -10,9 +10,9 @@ goog.provide('shaka.ui.ToggleStereoscopicButton');
 goog.require('shaka.ui.Controls');
 goog.require('shaka.ui.Element');
 goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Icon');
 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,10 +39,10 @@ shaka.ui.ToggleStereoscopicButton = class extends shaka.ui.Element {
     this.toggleStereoscopicButton_.classList.add('shaka-tooltip');
     this.toggleStereoscopicButton_.ariaPressed = 'false';
 
-    /** @private {!shaka.ui.MaterialSVGIcon} */
-    this.toggleStereoscopicIcon_ = new shaka.ui.MaterialSVGIcon(
+    /** @private {!shaka.ui.Icon} */
+    this.toggleStereoscopicIcon_ = new shaka.ui.Icon(
         this.toggleStereoscopicButton_,
-        shaka.ui.Enums.MaterialDesignSVGIcons.TOGGLE_STEREOSCOPIC);
+        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.ui.MaterialSVGIcon');
+goog.require('shaka.ui.Icon');
 
 
 shaka.ui.Utils = class {
@@ -65,8 +65,8 @@ shaka.ui.Utils = class {
    * @return {!SVGElement}
    */
   static checkmarkIcon() {
-    const icon = new shaka.ui.MaterialSVGIcon(null,
-        shaka.ui.Enums.MaterialDesignSVGIcons.CHECKMARK);
+    const icon = new shaka.ui.Icon(null,
+        shaka.ui.Enums.MaterialDesignSVGIcons['CHECKMARK']);
     const iconElement = icon.getSvgElement();
     iconElement.classList.add('shaka-chosen-item');
     // Screen reader should ignore icon text.

ui/video_type_selection.js

@@ -29,7 +29,7 @@ shaka.ui.VideoTypeSelection = class extends shaka.ui.SettingsMenu {
    */
   constructor(parent, controls) {
     super(parent, controls,
-        shaka.ui.Enums.MaterialDesignSVGIcons.VIDEO_TYPE);
+        shaka.ui.Enums.MaterialDesignSVGIcons['VIDEO_TYPE']);
 
     this.button.classList.add('shaka-playbackrate-button');
     this.menu.classList.add('shaka-video-type');