{"id":15628329,"url":"https://github.com/marella/material-icons","last_synced_at":"2026-01-11T13:28:28.717Z","repository":{"id":36498600,"uuid":"40804247","full_name":"marella/material-icons","owner":"marella","description":"Latest icon fonts and CSS for self-hosting material design icons.","archived":false,"fork":false,"pushed_at":"2025-02-12T02:30:22.000Z","size":60904,"stargazers_count":341,"open_issues_count":12,"forks_count":42,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-11T07:12:53.368Z","etag":null,"topics":["css","font","iconfont","icons","material","material-design","material-design-icons","material-icons","sass"],"latest_commit_sha":null,"homepage":"https://marella.github.io/material-icons/demo/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marella.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-16T08:19:01.000Z","updated_at":"2025-04-30T14:51:44.000Z","dependencies_parsed_at":"2024-06-18T12:30:27.741Z","dependency_job_id":"1e1fa198-29bb-43d1-ba0d-0b36ab88087d","html_url":"https://github.com/marella/material-icons","commit_stats":{"total_commits":253,"total_committers":7,"mean_commits":"36.142857142857146","dds":0.5138339920948616,"last_synced_commit":"9b6cb00bf8c1627ed65b6a78149df7abae14e144"},"previous_names":["materialicons/material-icons"],"tags_count":90,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marella%2Fmaterial-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marella%2Fmaterial-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marella%2Fmaterial-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marella%2Fmaterial-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marella","download_url":"https://codeload.github.com/marella/material-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254190368,"owners_count":22029631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","font","iconfont","icons","material","material-design","material-design-icons","material-icons","sass"],"created_at":"2024-10-03T10:21:56.857Z","updated_at":"2026-01-11T13:28:28.686Z","avatar_url":"https://github.com/marella.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [material-icons](https://github.com/marella/material-icons) [![Downloads](https://img.shields.io/npm/dm/material-icons)](https://www.npmjs.com/package/material-icons)\n\nLatest icon fonts and CSS for self-hosting material design icons.\n\n\u003e This package is automatically updated, so it will always have the latest icons from Google.\n\n\u003e For Material Symbols, see [`material-symbols`](https://www.npmjs.com/package/material-symbols)\n\u003e\n\u003e For SVGs, see [`@material-design-icons/svg`](https://www.npmjs.com/package/@material-design-icons/svg)\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Available Icons](#available-icons)\n\n## Installation\n\nInstall the [latest version][releases] using:\n\n```sh\nnpm install material-icons@latest\n```\n\n\u003e **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).\n\n## Usage\n\nImport in JS (example: `src/index.js` in Create React App, `src/main.js` in Vue CLI):\n\n```js\nimport 'material-icons/iconfont/material-icons.css';\n```\n\nor import in CSS (example: `src/styles.css` in Angular CLI):\n\n```css\n@import 'material-icons/iconfont/material-icons.css';\n```\n\nor import in HTML:\n\n```html\n\u003clink href=\"/path/to/material-icons/iconfont/material-icons.css\" rel=\"stylesheet\"\u003e\n```\n\nTo display an icon, use one of the following:\n\n```html\n\u003cspan class=\"material-icons\"\u003epie_chart\u003c/span\u003e          \u003c!-- Filled --\u003e\n\u003cspan class=\"material-icons-outlined\"\u003epie_chart\u003c/span\u003e \u003c!-- Outlined --\u003e\n\u003cspan class=\"material-icons-round\"\u003epie_chart\u003c/span\u003e    \u003c!-- Round --\u003e\n\u003cspan class=\"material-icons-sharp\"\u003epie_chart\u003c/span\u003e    \u003c!-- Sharp --\u003e\n\u003cspan class=\"material-icons-two-tone\"\u003epie_chart\u003c/span\u003e \u003c!-- Two Tone --\u003e\n```\n\n### Reducing Build Size\n\nThe 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`:\n\n```diff\n-import 'material-icons/iconfont/material-icons.css';\n+import 'material-icons/iconfont/filled.css';\n+import 'material-icons/iconfont/outlined.css';\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eShow all\u003c/strong\u003e\u003c/summary\u003e\u003cbr\u003e\n\nIcons | CSS | Sass\n:--- | :--- | :---\nFilled | filled.css | filled.scss\nOutlined | outlined.css | outlined.scss\nRound | round.css | round.scss\nSharp | sharp.css | sharp.scss\nTwo Tone | two-tone.css | two-tone.scss\n\n\u003c/details\u003e\n\n### Using Sass\n\nImport in Sass (example: `src/styles.scss` in Angular CLI):\n\n```scss\n@import 'material-icons/iconfont/material-icons.scss';\n```\n\nAvailable Sass variables:\n\n```scss\n$material-icons-font-path: './' !default;\n$material-icons-font-size: 24px !default;\n$material-icons-font-display: block !default;\n```\n\nIf you are getting errors with webpack or Vue CLI, add this line before importing:\n\n```scss\n$material-icons-font-path: '~material-icons/iconfont/';\n```\n\n### Using Angular `mat-icon`\n\nTo display an icon, use one of the following:\n\n```html\n\u003cmat-icon\u003epie_chart\u003c/mat-icon\u003e\n\u003cmat-icon fontSet=\"material-icons-outlined\"\u003epie_chart\u003c/mat-icon\u003e\n\u003cmat-icon fontSet=\"material-icons-round\"\u003epie_chart\u003c/mat-icon\u003e\n\u003cmat-icon fontSet=\"material-icons-sharp\"\u003epie_chart\u003c/mat-icon\u003e\n\u003cmat-icon fontSet=\"material-icons-two-tone\"\u003epie_chart\u003c/mat-icon\u003e\n```\n\n### Using CSS Classes\n\nAlternatively, you may use CSS classes instead of ligatures to display icons. [Learn more](https://github.com/marella/material-icons/tree/main/css#readme)\n\n## Available Icons\n\nSee [demo].\n\n## License\n\nMaterial design icons are created by [Google](https://github.com/google/material-design-icons#license).\n\n\u003e 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.\nWe'd love attribution in your app's *about* screen, but it's not required.\n\n[releases]: https://github.com/marella/material-icons/releases\n[license]: https://github.com/marella/material-icons/blob/main/LICENSE\n[demo]: https://marella.github.io/material-icons/demo/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarella%2Fmaterial-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarella%2Fmaterial-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarella%2Fmaterial-icons/lists"}