material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-27 06:04:44 +03:00
Code Issues Projects Releases Wiki Activity

Remove mwc-icon-font.js

Browse Source 
Let's just have the one way to load fonts, as documented in our README.
Updated all the demos to use the same recommendation.
This commit is contained in:
Alexander Marks 2019-10-08 13:54:28 -07:00
parent 7ac01425a4
commit af4ea8e0c2
34 changed files with 83 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
CHANGELOG.md
View File

@ -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

2
demos/button.html
View File

@ -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;

2
demos/checkbox.html
View File

@ -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>

2
demos/chips.html
View File

@ -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;

2
demos/demo-component.css
View File

@ -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;

2
demos/dialog.html
View File

@ -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 {

2
demos/drawer.html
View File

@ -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;

4
demos/drawer/dismissible.html
View File

@ -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>
</html>

4
demos/drawer/modal.html
View File

@ -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>
</html>

4
demos/drawer/standard.html
View File

@ -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>
</html>

2
demos/fab.html
View File

@ -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;

3
demos/formfield.html
View File

@ -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>

2
demos/icon-button-toggle.html
View File

@ -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;

2
demos/icon-button.html
View File

@ -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;

2
demos/icon.html
View File

@ -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 {

4
demos/index.html
View File

@ -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>

2
demos/linear-progress.html
View File

@ -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 {

2
demos/menu.html
View File

@ -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 {

2
demos/radio.html
View File

@ -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>

2
demos/ripple.html
View File

@ -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 {

2
demos/select.html
View File

@ -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 {

2
demos/slider.html
View File

@ -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;

2
demos/snackbar.html
View File

@ -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>

2
demos/switch.html
View File

@ -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>

2
demos/tabs.html
View File

@ -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;

2
demos/tabs/rtl.html
View File

@ -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;

3
demos/textarea.html
View File

@ -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;

3
demos/textfield.html
View File

@ -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;

4
demos/top-app-bar-fixed.html
View File

@ -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>
</html>

2
demos/top-app-bar.html
View File

@ -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;

4
demos/top-app-bars/fixed.html
View File

@ -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>
</script>

4
demos/top-app-bars/standard.html
View File

@ -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>
</script>

4
demos/top-app-bars/styling.css
View File

@ -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;
}
}

23
packages/icon/src/mwc-icon-font.ts
View File

@ -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);