fix(ui): Apply upstream styles for icons font

When we changed the font for the icons without changing the class
name, we lost upstream styles from the font server.  This was not
obvious in our demo, but was more obvious in other apps where the font
size was different.

By using the same class name as used by the font server, we get those
upstream styles applied correctly.

Issue shaka-project#2633

Change-Id: I615c1dfd86e5b9802d03050c5db0154ac196c2ef

demo/asset_card.js

@@ -258,7 +258,7 @@ shakaDemo.AssetCard = class {
       attachPoint.classList.add('asset-card-corner-button');
       const icon = document.createElement('i');
       icon.textContent = iconText;
-      icon.classList.add('material-icons');
+      icon.classList.add('material-icons-round');
       button.appendChild(icon);
     };
 

demo/close_button.js

@@ -21,7 +21,7 @@ shakaDemo.CloseButton = class extends shaka.ui.Element {
   constructor(parent, controls) {
     super(parent, controls);
     this.button_ = document.createElement('button');
-    this.button_.classList.add('material-icons');
+    this.button_.classList.add('material-icons-round');
     this.button_.classList.add('close-button');
     this.button_.textContent = 'close'; // Close icon.
     this.parent.appendChild(this.button_);

demo/custom.js

@@ -366,7 +366,7 @@ shakaDemo.Custom = class {
       button.classList.add('mdl-button--fab');
       button.classList.add('mdl-button--colored');
       const icon = document.createElement('i');
-      icon.classList.add('material-icons');
+      icon.classList.add('material-icons-round');
       icon.textContent = name;
       button.appendChild(icon);
     } else {

demo/demo.less

@@ -19,14 +19,6 @@
 @progress-circle-size: 45px;
 @progress-circle-thickness: 5px;
 
-/* This class name is used in the Google Fonts CSS to point to the non-rounded
- * variant we originally used.  We switched to a rounded variant and didn't want
- * to rename the classes we use everywhere, so we must explicitly set the
- * font-family for material icons application-wide. */
-.material-icons {
-  font-family: 'Material Icons Round';
-}
-
 /* This is a less mixin only, rather than a CSS class. MDL has an equivalent
  * class with the same name, which can be used in the application directly. */
 .hidden() {

demo/index.html

@@ -114,7 +114,7 @@
         <div id="hamburger-menu-title" class="mdl-layout-title">
           <div localized-string="CONFIG"></div>
           <div class="mdl-layout-spacer"></div>
-          <button id="drawer-close-button" class="mdl-button mdl-js-button mdl-button--icon should-disable-on-fail"><i class="material-icons">close</i></button>
+          <button id="drawer-close-button" class="mdl-button mdl-js-button mdl-button--icon should-disable-on-fail"><i class="material-icons-round">close</i></button>
         </div>
         <nav class="mdl-navigation" id="hamburger-menu-contents">
         </nav>

demo/input_container.js

@@ -135,7 +135,7 @@ shakaDemo.InputContainer = class {
     link.classList.add('mdl-button--colored');
 
     const icon = document.createElement('i');
-    icon.classList.add('material-icons');
+    icon.classList.add('material-icons-round');
     icon.textContent = 'help';
 
     link.appendChild(icon);

ui/cast_button.js

@@ -37,7 +37,7 @@ shaka.ui.CastButton = class extends shaka.ui.Element {
 
     /** @private {!HTMLElement} */
     this.castIcon_ = shaka.util.Dom.createHTMLElement('i');
-    this.castIcon_.classList.add('material-icons');
+    this.castIcon_.classList.add('material-icons-round');
     this.castIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.CAST;
     this.castButton_.appendChild(this.castIcon_);
 

ui/fast_forward_button.js

@@ -27,7 +27,7 @@ shaka.ui.FastForwardButton = class extends shaka.ui.Element {
 
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
-    this.button_.classList.add('material-icons');
+    this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-fast-forward-button');
     this.button_.textContent =
       shaka.ui.Enums.MaterialDesignIcons.FAST_FORWARD;

ui/fullscreen_button.js

@@ -29,7 +29,7 @@ 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');
+    this.button_.classList.add('material-icons-round');
 
     // Don't show the button if fullscreen is not supported
     if (!document.fullscreenEnabled) {

ui/less/containers.less

@@ -16,12 +16,12 @@
    * should be (484px vs 480px). */
   display: flex;
 
-  /* Set the fonts for all contents, with a special exception for material
-   * design icons. */
-  .material-icons {
+  /* Set a special font for material design icons. */
+  .material-icons-round {
     font-family: 'Material Icons Round';
   }
 
+  /* Set the fonts for all other content. */
   * {
     font-family: Roboto-Regular, Roboto, sans-serif;
   }

ui/loop_button.js

@@ -34,7 +34,7 @@ shaka.ui.LoopButton = class extends shaka.ui.Element {
 
     /** @private {!HTMLElement} */
     this.icon_ = shaka.util.Dom.createHTMLElement('i');
-    this.icon_.classList.add('material-icons');
+    this.icon_.classList.add('material-icons-round');
     this.icon_.textContent = shaka.ui.Enums.MaterialDesignIcons.LOOP;
     this.button_.appendChild(this.icon_);
 

ui/mute_button.js

@@ -29,7 +29,7 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-mute-button');
-    this.button_.classList.add('material-icons');
+    this.button_.classList.add('material-icons-round');
     this.button_.textContent = shaka.ui.Enums.MaterialDesignIcons.MUTE;
     this.parent.appendChild(this.button_);
     this.updateAriaLabel_();

ui/overflow_menu.js

@@ -166,7 +166,7 @@ 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');
+    this.overflowMenuButton_.classList.add('material-icons-round');
     this.overflowMenuButton_.textContent =
       shaka.ui.Enums.MaterialDesignIcons.OPEN_OVERFLOW;
     this.parent.appendChild(this.overflowMenuButton_);

ui/pip_button.js

@@ -37,7 +37,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
 
     /** @private {!HTMLElement} */
     this.pipIcon_ = shaka.util.Dom.createHTMLElement('i');
-    this.pipIcon_.classList.add('material-icons');
+    this.pipIcon_.classList.add('material-icons-round');
     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
     this.pipButton_.appendChild(this.pipIcon_);
 

ui/playback_rate_selection.js

@@ -82,7 +82,7 @@ shaka.ui.PlaybackRateSelection = class extends shaka.ui.SettingsMenu {
   updatePlaybackRateSelection_(rate) {
     // Remove the old checkmark icon and related tags and classes if it exists.
     const checkmarkIcon = shaka.ui.Utils.getDescendantIfExists(
-        this.menu, 'material-icons shaka-chosen-item');
+        this.menu, 'material-icons-round shaka-chosen-item');
     if (checkmarkIcon) {
       const previouslySelectedButton = checkmarkIcon.parentElement;
       previouslySelectedButton.removeAttribute('aria-selected');

ui/rewind_button.js

@@ -28,7 +28,7 @@ shaka.ui.RewindButton = class extends shaka.ui.Element {
 
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
-    this.button_.classList.add('material-icons');
+    this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-rewind-button');
     this.button_.textContent =
       shaka.ui.Enums.MaterialDesignIcons.REWIND;

ui/settings_menu.js

@@ -44,7 +44,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
 
     /** @protected {!HTMLElement}*/
     this.icon = shaka.util.Dom.createHTMLElement('i');
-    this.icon.classList.add('material-icons');
+    this.icon.classList.add('material-icons-round');
     this.icon.textContent = iconText;
     this.button.appendChild(this.icon);
 
@@ -80,7 +80,7 @@ shaka.ui.SettingsMenu = class extends shaka.ui.Element {
     this.menu.appendChild(this.backButton);
 
     const backIcon = shaka.util.Dom.createHTMLElement('i');
-    backIcon.classList.add('material-icons');
+    backIcon.classList.add('material-icons-round');
     backIcon.textContent = shaka.ui.Enums.MaterialDesignIcons.BACK;
     this.backButton.appendChild(backIcon);
 

ui/small_play_button.js

@@ -23,7 +23,7 @@ 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');
+    this.button.classList.add('material-icons-round');
 
     this.updateIcon();
     this.updateAriaLabel();

ui/ui_utils.js

@@ -62,7 +62,7 @@ shaka.ui.Utils = class {
    */
   static checkmarkIcon() {
     const icon = shaka.util.Dom.createHTMLElement('i');
-    icon.classList.add('material-icons');
+    icon.classList.add('material-icons-round');
     icon.classList.add('shaka-chosen-item');
     icon.textContent = shaka.ui.Enums.MaterialDesignIcons.CHECKMARK;
     // Screen reader should ignore icon text.