1 | # [@material-design-icons/svg](https://github.com/marella/material-design-icons/tree/main/svg)
|
2 |
|
3 | Latest optimized SVGs for material design icons.
|
4 |
|
5 | > This package is automatically updated, so it will always have the latest icons from Google.
|
6 |
|
7 | > For Material Symbols, see [`material-symbols`](https://www.npmjs.com/package/material-symbols)
|
8 | >
|
9 | > For icon fonts, see [`@material-design-icons/font`](https://www.npmjs.com/package/@material-design-icons/font)
|
10 |
|
11 | - [Installation](#installation)
|
12 | - [Usage](#usage)
|
13 | - [Available Icons](#available-icons)
|
14 |
|
15 | ## Installation
|
16 |
|
17 | Install the [latest version][releases] using:
|
18 |
|
19 | ```sh
|
20 | npm install @material-design-icons/svg@latest
|
21 | ```
|
22 |
|
23 | ## Usage
|
24 |
|
25 | Material icons are available in five styles—`filled`, `outlined`, `round`, `sharp` and `two-tone`. SVGs for each icon are located in the corresponding style directory:
|
26 |
|
27 | ```js
|
28 | @material-design-icons/svg/{style}/{icon}.svg
|
29 | ```
|
30 |
|
31 | For example, SVGs for `face` icon are located at:
|
32 |
|
33 | ```js
|
34 | @material-design-icons/svg/filled/face.svg
|
35 | @material-design-icons/svg/outlined/face.svg
|
36 | @material-design-icons/svg/round/face.svg
|
37 | @material-design-icons/svg/sharp/face.svg
|
38 | @material-design-icons/svg/two-tone/face.svg
|
39 | ```
|
40 |
|
41 | ### React
|
42 |
|
43 | You can use [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack) to import SVGs as React components:
|
44 |
|
45 | ```js
|
46 | import Face from '@material-design-icons/svg/filled/face.svg';
|
47 |
|
48 | // Face is a React component that renders the SVG
|
49 |
|
50 | function App() {
|
51 | return (
|
52 | <div className="App">
|
53 | <Face />
|
54 | </div>
|
55 | );
|
56 | }
|
57 | ```
|
58 |
|
59 | If you are using `@svgr/webpack` with `file-loader` (example: [Create React App](https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs)), use:
|
60 |
|
61 | ```js
|
62 | import { ReactComponent as Face } from '@material-design-icons/svg/filled/face.svg';
|
63 | ```
|
64 |
|
65 | ### Vue
|
66 |
|
67 | You can use [`@svgv/webpack`](https://www.npmjs.com/package/@svgv/webpack) to import SVGs as Vue components:
|
68 |
|
69 | ```html
|
70 | <template>
|
71 | <div class="App">
|
72 | <Face />
|
73 | </div>
|
74 | </template>
|
75 |
|
76 | <script>
|
77 | import Face from '@material-design-icons/svg/filled/face.svg';
|
78 |
|
79 | // Face is a Vue component that renders the SVG
|
80 |
|
81 | export default {
|
82 | components: {
|
83 | Face,
|
84 | },
|
85 | };
|
86 | </script>
|
87 | ```
|
88 |
|
89 | ### Styling
|
90 |
|
91 | SVGs can be styled using CSS. Setting `width` and `height` to `1em` allows changing size via `font-size`. Setting `fill` to `currentColor` allows changing color via `color`.
|
92 |
|
93 | ```css
|
94 | .App svg {
|
95 | width: 1em;
|
96 | height: 1em;
|
97 | fill: currentColor;
|
98 | }
|
99 | ```
|
100 |
|
101 | ## Available Icons
|
102 |
|
103 | See [demo].
|
104 |
|
105 | ## License
|
106 |
|
107 | Material design icons are created by [Google](https://github.com/google/material-design-icons#license).
|
108 |
|
109 | > We have made these icons available for you to incorporate into your products under the [Apache License Version 2.0][license]. Feel free to remix and re-share these icons and documentation in your products.
|
110 | We'd love attribution in your app's *about* screen, but it's not required.
|
111 |
|
112 | [releases]: https://github.com/marella/material-design-icons/releases
|
113 | [license]: https://github.com/marella/material-design-icons/blob/main/svg/LICENSE
|
114 | [demo]: https://marella.github.io/material-design-icons/demo/svg/
|