From af4ea8e0c257ed194e57da0ecb9595405dde14cd Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 8 Oct 2019 13:54:28 -0700
Subject: [PATCH] Remove mwc-icon-font.js

Let's just have the one way to load fonts, as documented in our README.
Updated all the demos to use the same recommendation.
---
 CHANGELOG.md                       | 18 ++++++++++++++++--
 demos/button.html                  |  2 ++
 demos/checkbox.html                |  2 ++
 demos/chips.html                   |  2 ++
 demos/demo-component.css           |  2 --
 demos/dialog.html                  |  2 ++
 demos/drawer.html                  |  2 ++
 demos/drawer/dismissible.html      |  4 +++-
 demos/drawer/modal.html            |  4 +++-
 demos/drawer/standard.html         |  4 +++-
 demos/fab.html                     |  2 ++
 demos/formfield.html               |  3 ++-
 demos/icon-button-toggle.html      |  2 ++
 demos/icon-button.html             |  2 ++
 demos/icon.html                    |  2 ++
 demos/index.html                   |  4 ++--
 demos/linear-progress.html         |  2 ++
 demos/menu.html                    |  2 ++
 demos/radio.html                   |  2 ++
 demos/ripple.html                  |  2 ++
 demos/select.html                  |  2 ++
 demos/slider.html                  |  2 ++
 demos/snackbar.html                |  2 ++
 demos/switch.html                  |  2 ++
 demos/tabs.html                    |  2 ++
 demos/tabs/rtl.html                |  2 ++
 demos/textarea.html                |  3 ++-
 demos/textfield.html               |  3 ++-
 demos/top-app-bar-fixed.html       |  4 +++-
 demos/top-app-bar.html             |  2 ++
 demos/top-app-bars/fixed.html      |  4 +++-
 demos/top-app-bars/standard.html   |  4 +++-
 demos/top-app-bars/styling.css     |  4 +---
 packages/icon/src/mwc-icon-font.ts | 23 -----------------------
 34 files changed, 83 insertions(+), 41 deletions(-)
 delete mode 100644 packages/icon/src/mwc-icon-font.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 691fc19be..cc25ac6f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Unreleased
 
+### Changed
+
+- **BREAKING** Removed `mwc-icon-font.js` import. Most users should load the
+  Material Icons and Roboto fonts by adding the following to their HTML file:
+
+  ```html
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
+  ```
+
+  See the [Fonts](https://github.com/material-components/material-components-web-components#fonts)
+  section of the README for more details.
+
 ### Fixed
 
 - Fixed `mwc-dialog`'s issues with working on older browsers.
@@ -112,10 +125,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   ([#314](https://github.com/material-components/material-components-web-components/pull/314)).
   This allows more control over how fonts are loaded (e.g. serving fonts from a
   different server, or loading multiple fonts with a single request). Most users
-  should now add a tag like this to their HTML page:
+  should now add tags like this to their HTML page:
 
   ```html
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   ```
 
 - **BREAKING** The *toggling* behavior of `<mwc-icon-button>` has been removed
diff --git a/demos/button.html b/demos/button.html
index 0be6f109c..19deafca0 100644
--- a/demos/button.html
+++ b/demos/button.html
@@ -23,6 +23,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     mwc-button {
       margin: 20px;
diff --git a/demos/checkbox.html b/demos/checkbox.html
index 2378bcd66..6bd9c4f53 100644
--- a/demos/checkbox.html
+++ b/demos/checkbox.html
@@ -23,6 +23,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-checkbox/mwc-checkbox.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 <body class="unresolved">
   <header>
diff --git a/demos/chips.html b/demos/chips.html
index b7c829548..5aa18bcb6 100644
--- a/demos/chips.html
+++ b/demos/chips.html
@@ -24,6 +24,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-chips/mwc-chip-set.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     mwc-chip-set {
       --mwc-theme-primary: lightblue;
diff --git a/demos/demo-component.css b/demos/demo-component.css
index d5e135582..f37d1fbef 100644
--- a/demos/demo-component.css
+++ b/demos/demo-component.css
@@ -1,5 +1,3 @@
-@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons";
-
 body {
   font-family: Roboto, sans-serif;
   margin: 0;
diff --git a/demos/dialog.html b/demos/dialog.html
index ca02fe8b1..a10aba0f1 100644
--- a/demos/dialog.html
+++ b/demos/dialog.html
@@ -25,6 +25,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-dialog/mwc-dialog.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 
   <style>
     body {
diff --git a/demos/drawer.html b/demos/drawer.html
index 1697bf76a..9474c9356 100644
--- a/demos/drawer.html
+++ b/demos/drawer.html
@@ -22,6 +22,8 @@ limitations under the License.
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     iframe {
       border: 1px solid gray;
diff --git a/demos/drawer/dismissible.html b/demos/drawer/dismissible.html
index bb9b213ae..f404777c0 100644
--- a/demos/drawer/dismissible.html
+++ b/demos/drawer/dismissible.html
@@ -25,6 +25,8 @@ limitations under the License.
   <script type="module" src="../../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
   <link rel="stylesheet" href="../demo-component.css">
   <link rel="stylesheet" href="drawer.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 <body>
   <mwc-drawer hasHeader type="dismissible">
@@ -50,4 +52,4 @@ limitations under the License.
   </mwc-drawer>
   <script src="drawer.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/demos/drawer/modal.html b/demos/drawer/modal.html
index f66be2926..c918dc40e 100644
--- a/demos/drawer/modal.html
+++ b/demos/drawer/modal.html
@@ -25,6 +25,8 @@ limitations under the License.
   <script type="module" src="../../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
   <link rel="stylesheet" href="../demo-component.css">
   <link rel="stylesheet" href="drawer.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 <body>
   <mwc-drawer hasHeader type="modal">
@@ -52,4 +54,4 @@ limitations under the License.
   </mwc-drawer>
   <script src="drawer.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/demos/drawer/standard.html b/demos/drawer/standard.html
index d4fa598f9..c553610e4 100644
--- a/demos/drawer/standard.html
+++ b/demos/drawer/standard.html
@@ -24,6 +24,8 @@ limitations under the License.
   <script type="module" src="../../node_modules/@material/mwc-top-app-bar/mwc-top-app-bar.js"></script>
   <link rel="stylesheet" href="../demo-component.css">
   <link rel="stylesheet" href="drawer.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 <body>
   <mwc-drawer hasHeader>
@@ -47,4 +49,4 @@ limitations under the License.
     </div>
   </mwc-drawer>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/demos/fab.html b/demos/fab.html
index ead996b16..2343562c9 100644
--- a/demos/fab.html
+++ b/demos/fab.html
@@ -23,6 +23,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-fab/mwc-fab.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     mwc-fab {
       margin-right: 50px;
diff --git a/demos/formfield.html b/demos/formfield.html
index 8d5d0c066..b4e93e028 100644
--- a/demos/formfield.html
+++ b/demos/formfield.html
@@ -24,9 +24,10 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-checkbox/mwc-checkbox.js"></script>
   <script type="module" src="../node_modules/@material/mwc-radio/mwc-radio.js"></script>
   <script type="module" src="../node_modules/@material/mwc-switch/mwc-switch.js"></script>
-  <!-- <script type="module" src="../node_modules/@material/mwc-slider/mwc-slider.js"></script> -->
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 <body class="unresolved">
   <header>
diff --git a/demos/icon-button-toggle.html b/demos/icon-button-toggle.html
index a96c388ee..028df16de 100644
--- a/demos/icon-button-toggle.html
+++ b/demos/icon-button-toggle.html
@@ -23,6 +23,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-icon-button-toggle/mwc-icon-button-toggle.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     mwc-icon-button-toggle {
       margin: 20px;
diff --git a/demos/icon-button.html b/demos/icon-button.html
index 210cc64c4..9dc8b3d80 100644
--- a/demos/icon-button.html
+++ b/demos/icon-button.html
@@ -23,6 +23,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     mwc-icon-button {
       padding: 20px;
diff --git a/demos/icon.html b/demos/icon.html
index 6819359e4..8eda9edfd 100644
--- a/demos/icon.html
+++ b/demos/icon.html
@@ -22,6 +22,8 @@ limitations under the License.
   <script  src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
 
     .color-size {
diff --git a/demos/index.html b/demos/index.html
index 633b24b7b..3147d39ab 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -20,8 +20,8 @@ limitations under the License.
   <title>Material Web Components Catalog</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="demo-component.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Material+Icons">
-</head>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 <body>
   <demo-view></demo-view>
 
diff --git a/demos/linear-progress.html b/demos/linear-progress.html
index cbf3d1d74..dd990c69f 100644
--- a/demos/linear-progress.html
+++ b/demos/linear-progress.html
@@ -24,6 +24,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
 
     mwc-linear-progress {
diff --git a/demos/menu.html b/demos/menu.html
index 9a9cd0540..69a3b5742 100644
--- a/demos/menu.html
+++ b/demos/menu.html
@@ -26,6 +26,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-list/mwc-list-item-separator.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 
   <style>
     body {
diff --git a/demos/radio.html b/demos/radio.html
index b5a83a07f..f9eaa45df 100644
--- a/demos/radio.html
+++ b/demos/radio.html
@@ -23,6 +23,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-radio/mwc-radio.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 <body class="unresolved">
   <header>
diff --git a/demos/ripple.html b/demos/ripple.html
index 401fb1955..1b69adec5 100644
--- a/demos/ripple.html
+++ b/demos/ripple.html
@@ -23,6 +23,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-ripple/mwc-ripple.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
 
     .demo-box {
diff --git a/demos/select.html b/demos/select.html
index 32f11092a..fa1467f2f 100644
--- a/demos/select.html
+++ b/demos/select.html
@@ -23,6 +23,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-select/mwc-select.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 
   <style>
     body {
diff --git a/demos/slider.html b/demos/slider.html
index 0a1bc5939..1fd58b1d4 100644
--- a/demos/slider.html
+++ b/demos/slider.html
@@ -23,6 +23,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-slider/mwc-slider.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     .demo-container {
       display: flex;
diff --git a/demos/snackbar.html b/demos/snackbar.html
index a2fbf96e0..30ee1e24c 100644
--- a/demos/snackbar.html
+++ b/demos/snackbar.html
@@ -25,6 +25,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 <body class="unresolved">
   <header>
diff --git a/demos/switch.html b/demos/switch.html
index 937e427fd..89d2b5bf2 100644
--- a/demos/switch.html
+++ b/demos/switch.html
@@ -23,6 +23,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-switch/mwc-switch.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 </head>
 <body class="unresolved">
   <header>
diff --git a/demos/tabs.html b/demos/tabs.html
index 940cdb4bf..7d543a38d 100644
--- a/demos/tabs.html
+++ b/demos/tabs.html
@@ -24,6 +24,8 @@ limitations under the License.
   <script type="module" src="../node_modules/@material/mwc-tab-bar/mwc-tab-bar.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     iframe {
       border: 1px solid gray;
diff --git a/demos/tabs/rtl.html b/demos/tabs/rtl.html
index bde24caaa..0f9fe7e47 100644
--- a/demos/tabs/rtl.html
+++ b/demos/tabs/rtl.html
@@ -24,6 +24,8 @@ limitations under the License.
   <script type="module" src="../../node_modules/@material/mwc-tab-bar/mwc-tab-bar.js"></script>
   <script type="module" src="../../node_modules/@material/mwc-icon/mwc-icon.js"></script>
   <link rel="stylesheet" href="../demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     main {
       margin-top: 0;
diff --git a/demos/textarea.html b/demos/textarea.html
index 9bfc9f22f..24b00503c 100644
--- a/demos/textarea.html
+++ b/demos/textarea.html
@@ -22,8 +22,9 @@ limitations under the License.
   <script  src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script type="module" src="../node_modules/@material/mwc-textarea/mwc-textarea.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
-  <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon-font.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     mwc-textarea {
       min-width: 250px;
diff --git a/demos/textfield.html b/demos/textfield.html
index ca54281e7..16edcb414 100644
--- a/demos/textfield.html
+++ b/demos/textfield.html
@@ -22,8 +22,9 @@ limitations under the License.
   <script  src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script type="module" src="../node_modules/@material/mwc-textfield/mwc-textfield.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
-  <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon-font.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     mwc-textfield {
       min-width: 240px;
diff --git a/demos/top-app-bar-fixed.html b/demos/top-app-bar-fixed.html
index be4d02eb5..0b1e5f135 100644
--- a/demos/top-app-bar-fixed.html
+++ b/demos/top-app-bar-fixed.html
@@ -22,6 +22,8 @@ limitations under the License.
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     iframe {
       border-width: 0;
@@ -63,4 +65,4 @@ limitations under the License.
     addEventListener('load', () => document.body.classList.remove('unresolved'));
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/demos/top-app-bar.html b/demos/top-app-bar.html
index 38783c38b..b7af68a8a 100644
--- a/demos/top-app-bar.html
+++ b/demos/top-app-bar.html
@@ -22,6 +22,8 @@ limitations under the License.
   <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
   <script type="module" src="../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
   <link rel="stylesheet" href="demo-component.css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <style>
     iframe {
       border-width: 0;
diff --git a/demos/top-app-bars/fixed.html b/demos/top-app-bars/fixed.html
index e53cb209a..0483688b9 100644
--- a/demos/top-app-bars/fixed.html
+++ b/demos/top-app-bars/fixed.html
@@ -2,6 +2,8 @@
 <script type="module" src="../../node_modules/@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed.js"></script>
 <script type="module" src="../../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
 <link rel="stylesheet" href="./styling.css">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 <mwc-top-app-bar-fixed id="bar">
     <mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
     <div slot="title" id="title">Fixed</div>
@@ -52,4 +54,4 @@
         bar.removeChild(node);
       }
     }
-  </script>
\ No newline at end of file
+  </script>
diff --git a/demos/top-app-bars/standard.html b/demos/top-app-bars/standard.html
index 318d2c710..440408f7d 100644
--- a/demos/top-app-bars/standard.html
+++ b/demos/top-app-bars/standard.html
@@ -2,6 +2,8 @@
 <script type="module" src="../../node_modules/@material/mwc-top-app-bar/mwc-top-app-bar.js"></script>
 <script type="module" src="../../node_modules/@material/mwc-icon-button/mwc-icon-button.js"></script>
 <link rel="stylesheet" href="./styling.css">
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 <mwc-top-app-bar id="bar">
     <mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
     <div slot="title" id="title">Standard</div>
@@ -52,4 +54,4 @@
         bar.removeChild(node);
       }
     }
-  </script>
\ No newline at end of file
+  </script>
diff --git a/demos/top-app-bars/styling.css b/demos/top-app-bars/styling.css
index 5c7708377..9d8e204f8 100644
--- a/demos/top-app-bars/styling.css
+++ b/demos/top-app-bars/styling.css
@@ -1,5 +1,3 @@
-@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons";
-
 body {
   font-family: Roboto, sans-serif;
   margin: 0;
@@ -14,4 +12,4 @@ body {
 .custom {
   --mdc-theme-primary: orange;
   --mdc-theme-on-primary: black;
-}
\ No newline at end of file
+}
diff --git a/packages/icon/src/mwc-icon-font.ts b/packages/icon/src/mwc-icon-font.ts
deleted file mode 100644
index 3f9279edb..000000000
--- a/packages/icon/src/mwc-icon-font.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
-@license
-Copyright 2018 Google Inc. All Rights Reserved.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-// load material icons font
-const fontEl = document.createElement('link');
-fontEl.rel = 'stylesheet';
-fontEl.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-document.head!.appendChild(fontEl);