1 | # `<mwc-icon>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-icon.svg)](https://www.npmjs.com/package/@material/mwc-icon)
|
2 | > IMPORTANT: The Material Web Components are a work in progress and subject to
|
3 | > major changes until 1.0 release.
|
4 |
|
5 | Icon displays an icon with a chosen name from the [Material Icons](https://material.io/resources/icons/) font, or from any
|
6 | font that supports *ligatures*.
|
7 |
|
8 | [Material Design Guidelines: System icons](https://material.io/design/iconography/system-icons.html)
|
9 |
|
10 | [Demo](https://material-components.github.io/material-web/demos/icon/)
|
11 |
|
12 | ## Installation
|
13 |
|
14 | ```sh
|
15 | npm install @material/mwc-icon
|
16 | ```
|
17 |
|
18 | > NOTE: The Material Web Components are distributed as ES2017 JavaScript
|
19 | > Modules, and use the Custom Elements API. They are compatible with all modern
|
20 | > browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional
|
21 | > tooling step is required to resolve *bare module specifiers*, as well as
|
22 | > transpilation and polyfills for IE11. See
|
23 | > [here](https://github.com/material-components/material-components-web-components#quick-start)
|
24 | > for detailed instructions.
|
25 |
|
26 | ## Example usage
|
27 |
|
28 | ### Basic
|
29 |
|
30 | <img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon/images/shopping_cart.png" width="32px" height="32px">
|
31 |
|
32 | ```html
|
33 | <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
|
34 |
|
35 | <mwc-icon>shopping_cart</mwc-icon>
|
36 |
|
37 | <script type="module">
|
38 | import '@material/mwc-icon/mwc-icon.js';
|
39 | </script>
|
40 | ```
|
41 |
|
42 | ### As a link
|
43 |
|
44 | <img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon/images/arrow_back.png" width="32px" height="32px">
|
45 |
|
46 | ```html
|
47 | <a href="index.html">
|
48 | <mwc-icon>arrow_back</mwc-icon>
|
49 | </a>
|
50 | ```
|
51 |
|
52 | ### Styled
|
53 |
|
54 | <img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/icon/images/accessible_forward.png" width="64px" height="64px">
|
55 |
|
56 | ```html
|
57 | <style>
|
58 | .fancy {
|
59 | color: #03a9f4;
|
60 | --mdc-icon-size: 64px;
|
61 | }
|
62 | </style>
|
63 |
|
64 | <mwc-icon class="fancy">accessible_forward</mwc-icon>
|
65 | ```
|
66 |
|
67 | ## Fonts
|
68 |
|
69 | Most users should include the following in their application HTML when using
|
70 | icons:
|
71 |
|
72 | ```html
|
73 | <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
|
74 | ```
|
75 |
|
76 | This loads the *Material Icons* font, which is required to render icons, and is
|
77 | *not* loaded automatically. If you see plain text instead of an icon, then the
|
78 | most likely cause is that the Material Icons font is not loaded.
|
79 |
|
80 | To see all icons that are available in the Material Icons font, see
|
81 | [Material Icons](https://material.io/resources/icons/).
|
82 |
|
83 | For technical details about the Material Icons font, see the
|
84 | [Material Icons Developer Guide](https://google.github.io/material-design-icons/).
|
85 |
|
86 |
|
87 | ## API
|
88 |
|
89 | ### Slots
|
90 |
|
91 | Name | Description
|
92 | --------- | -----------
|
93 | *default* | The name of the icon to display (e.g. `shopping_cart`). See [Material Icons](https://material.io/resources/icons/) for an index of all available icons.
|
94 |
|
95 |
|
96 | ### Properties/Attributes
|
97 |
|
98 | *None*
|
99 |
|
100 | ### Methods
|
101 |
|
102 | *None*
|
103 |
|
104 | ### Events
|
105 |
|
106 | *None*
|
107 |
|
108 | ### CSS Custom Properties
|
109 |
|
110 | Name | Default | Description
|
111 | ----------------- | ---------------- | -----------
|
112 | `--mdc-icon-font` | [`Material Icons`](https://material.io/resources/icons/) | Font that supports *ligatures* and determines which icons are available (see [fonts](#fonts) above).
|
113 | `--mdc-icon-size` | `24px` | Size of the icon.
|