		{
		"name": "material-icons",
		"version": "0.7.0",
		"version": "0.7.1",
		"description": "Material design icon font and CSS framework for self hosting the icons.",
		@@ -10,2 +10,3 @@ "files": [
		"browser": "iconfont/material-icons.css",
		"sass": "iconfont/material-icons.scss",
		"scripts": {
		@@ -12,0 +13,0 @@ "build": "npm run build:codepoints && npm run build:css && npm run build:css:min",

164

README.md

		@@ -19,66 +19,56 @@ # Material Icons

		Fonts are located in the [`iconfont`][iconfont] directory and can be imported using CSS:
		Import in JS (example: `src/index.js` in Create React App, `src/main.js` in Vue CLI):

		```html
		<link href="/path/to/material-icons/iconfont/material-icons.css" rel="stylesheet">
		```js
		import 'material-icons/iconfont/material-icons.css';
		```

		To display an icon, use:
		or import in CSS (example: `src/styles.css` in Angular CLI):

		```html
		<span class="material-icons">pie_chart</span>
		```css
		@import 'material-icons/iconfont/material-icons.css';
		```

		To display outlined, round, sharp and two-tone icons, use:
		or import in HTML:

		```html
		<span class="material-icons-outlined">pie_chart</span>
		<span class="material-icons-round">pie_chart</span>
		<span class="material-icons-sharp">pie_chart</span>
		<span class="material-icons-two-tone">pie_chart</span>
		<link href="/path/to/material-icons/iconfont/material-icons.css" rel="stylesheet">
		```

		For more advanced usage, see:
		To display an icon, use one of the following:

		<details>
		<summary><strong>Import using build tools</strong></summary>
		```html
		<span class="material-icons">pie_chart</span> <!-- Filled -->
		<span class="material-icons-outlined">pie_chart</span> <!-- Outlined -->
		<span class="material-icons-round">pie_chart</span> <!-- Round -->
		<span class="material-icons-sharp">pie_chart</span> <!-- Sharp -->
		<span class="material-icons-two-tone">pie_chart</span> <!-- Two Tone -->
		```

		If you are using webpack, Create React App or Vue CLI, import CSS in `src/index.js` or `src/main.js`:
		### Reducing Build Size

		```js
		import 'material-icons/iconfont/material-icons.css';
		```
		The default `material-icons.css` includes CSS for all fonts. This may cause build tools such as webpack to copy all fonts to the build directory even if you are not using all of them. To reduce the build size, import only the styles you need. For example, if you only need filled and outlined icons, import `filled.css` and `outlined.css` instead of the default `material-icons.css`:

		If you are using Angular CLI, import CSS in `src/styles.css`:

		```css
		@import 'material-icons/iconfont/material-icons.css';
		```diff
		-import 'material-icons/iconfont/material-icons.css';
		+import 'material-icons/iconfont/filled.css';
		+import 'material-icons/iconfont/outlined.css';
		```

		</details>

		<details>
		<summary><strong>Display using Angular <code>mat-icon</code></strong></summary>
		<summary><strong>Show all</strong></summary><br>

		To display an icon, use:
		Icons \| CSS \| Sass
		:--- \| :--- \| :---
		Filled \| filled.css \| filled.scss
		Outlined \| outlined.css \| outlined.scss
		Round \| round.css \| round.scss
		Sharp \| sharp.css \| sharp.scss
		Two Tone \| two-tone.css \| two-tone.scss

		```html
		<mat-icon>pie_chart</mat-icon>
		```

		To display outlined, round, sharp and two-tone icons, use:

		```html
		<mat-icon fontSet="material-icons-outlined">pie_chart</mat-icon>
		<mat-icon fontSet="material-icons-round">pie_chart</mat-icon>
		<mat-icon fontSet="material-icons-sharp">pie_chart</mat-icon>
		<mat-icon fontSet="material-icons-two-tone">pie_chart</mat-icon>
		```

		</details>

		<details>
		<summary><strong>Customize using Sass</strong></summary>
		### Using Sass

		To customize the build, import Sass instead of CSS:
		Import in Sass (example: `src/styles.scss` in Angular CLI):

		@@ -97,3 +87,3 @@ ```scss

		If you are getting errors with webpack or Vue CLI, add this line before importing above Sass file:
		If you are getting errors with webpack or Vue CLI, add this line before importing:

		@@ -104,87 +94,18 @@ ```scss

		</details>
		### Using Angular `mat-icon`

		### CSS Classes
		To display an icon, use one of the following:

		> Note: This method is not recommended as it requires an additional large CSS file.

		Alternatively, you may use CSS classes to display icons by importing additional CSS:

		```html
		<link href="/path/to/material-icons/css/material-icons.css" rel="stylesheet">
		<mat-icon>pie_chart</mat-icon>
		<mat-icon fontSet="material-icons-outlined">pie_chart</mat-icon>
		<mat-icon fontSet="material-icons-round">pie_chart</mat-icon>
		<mat-icon fontSet="material-icons-sharp">pie_chart</mat-icon>
		<mat-icon fontSet="material-icons-two-tone">pie_chart</mat-icon>
		```

		To display an icon, use:
		### Using CSS Classes

		```html
		<span class="material-icons mi-pie-chart"></span>
		```
		Alternatively, you may use CSS classes instead of ligatures to display icons. [Learn more](https://github.com/marella/material-icons/tree/main/css#readme)

		To display outlined, round, sharp and two-tone icons, use:

		```html
		<span class="material-icons-outlined mi-pie-chart"></span>
		<span class="material-icons-round mi-pie-chart"></span>
		<span class="material-icons-sharp mi-pie-chart"></span>
		<span class="material-icons-two-tone mi-pie-chart"></span>
		```

		For more advanced usage, see:

		<details>
		<summary><strong>Import using build tools</strong></summary>

		If you are using webpack, Create React App or Vue CLI, import CSS in `src/index.js` or `src/main.js`:

		```js
		import 'material-icons/css/material-icons.css';
		```

		If you are using Angular CLI, import CSS in `src/styles.css`:

		```css
		@import 'material-icons/css/material-icons.css';
		```

		</details>

		<details>
		<summary><strong>Display using Angular <code>mat-icon</code></strong></summary>

		To display an icon, use:

		```html
		<mat-icon fontIcon="mi-pie-chart"></mat-icon>
		```

		To display outlined, round, sharp and two-tone icons, use:

		```html
		<mat-icon fontSet="material-icons-outlined" fontIcon="mi-pie-chart"></mat-icon>
		<mat-icon fontSet="material-icons-round" fontIcon="mi-pie-chart"></mat-icon>
		<mat-icon fontSet="material-icons-sharp" fontIcon="mi-pie-chart"></mat-icon>
		<mat-icon fontSet="material-icons-two-tone" fontIcon="mi-pie-chart"></mat-icon>
		```

		</details>

		<details>
		<summary><strong>Customize using Sass</strong></summary>

		To customize the build, import Sass instead of CSS:

		```scss
		@import 'material-icons/css/material-icons.scss';
		```

		Available Sass variables:

		```scss
		$material-icons-css-prefix: 'mi' !default;
		$material-icons-css-search: '_' !default;
		$material-icons-css-replace: '-' !default; // Replaces '_' with '-' in CSS classes
		```

		</details>

		## Available Icons
		@@ -202,4 +123,3 @@
		[releases]: https://github.com/marella/material-icons/releases
		[iconfont]: https://github.com/marella/material-icons/tree/main/iconfont
		[license]: https://github.com/marella/material-icons/blob/main/LICENSE
		[demo]: https://marella.github.io/material-icons/demo/

css/material-icons.css