Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marella/material-icons
Latest icon fonts and CSS for self-hosting material design icons.
https://github.com/marella/material-icons
css font iconfont icons material material-design material-design-icons material-icons sass
Last synced: 22 days ago
JSON representation
Latest icon fonts and CSS for self-hosting material design icons.
- Host: GitHub
- URL: https://github.com/marella/material-icons
- Owner: marella
- License: apache-2.0
- Created: 2015-08-16T08:19:01.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2024-06-16T22:35:49.000Z (5 months ago)
- Last Synced: 2024-10-10T22:46:43.150Z (about 1 month ago)
- Topics: css, font, iconfont, icons, material, material-design, material-design-icons, material-icons, sass
- Language: CSS
- Homepage: https://marella.github.io/material-icons/demo/
- Size: 58 MB
- Stars: 314
- Watchers: 4
- Forks: 37
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [material-icons](https://github.com/marella/material-icons) [](https://www.npmjs.com/package/material-icons)
Latest icon fonts and CSS for self-hosting material design icons.
> This package is automatically updated, so it will always have the latest icons from Google.
> For Material Symbols, see [`material-symbols`](https://www.npmjs.com/package/material-symbols)
>
> For SVGs, see [`@material-design-icons/svg`](https://www.npmjs.com/package/@material-design-icons/svg)
- [Installation](#installation)
- [Usage](#usage)
- [Available Icons](#available-icons)
## Installation
Install the [latest version][releases] using:
```sh
npm install material-icons@latest
```
> **Note:** If you are upgrading from 0.x to 1.x see the [1.0.0 release notes](https://github.com/marella/material-icons/releases/tag/v1.0.0).
## Usage
Import in JS (example: `src/index.js` in Create React App, `src/main.js` in Vue CLI):
```js
import 'material-icons/iconfont/material-icons.css';
```
or import in CSS (example: `src/styles.css` in Angular CLI):
```css
@import 'material-icons/iconfont/material-icons.css';
```
or import in HTML:
```html
```
To display an icon, use one of the following:
```html
```
### Reducing Build Size
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`:
```diff
-import 'material-icons/iconfont/material-icons.css';
+import 'material-icons/iconfont/filled.css';
+import 'material-icons/iconfont/outlined.css';
```
Show all
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
### Using Sass
Import in Sass (example: `src/styles.scss` in Angular CLI):
```scss
@import 'material-icons/iconfont/material-icons.scss';
```
Available Sass variables:
```scss
$material-icons-font-path: './' !default;
$material-icons-font-size: 24px !default;
$material-icons-font-display: block !default;
```
If you are getting errors with webpack or Vue CLI, add this line before importing:
```scss
$material-icons-font-path: '~material-icons/iconfont/';
```
### Using Angular `mat-icon`
To display an icon, use one of the following:
```html
pie_chart
pie_chart
pie_chart
pie_chart
pie_chart
```
### Using CSS Classes
Alternatively, you may use CSS classes instead of ligatures to display icons. [Learn more](https://github.com/marella/material-icons/tree/main/css#readme)
## Available Icons
See [demo].
## License
Material design icons are created by [Google](https://github.com/google/material-design-icons#license).
> 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.
We'd love attribution in your app's *about* screen, but it's not required.
[releases]: https://github.com/marella/material-icons/releases
[license]: https://github.com/marella/material-icons/blob/main/LICENSE
[demo]: https://marella.github.io/material-icons/demo/