# Material Design Icons — Google's Open Source Icon Set for Any Platform

> A comprehensive open-source icon library by Google offering thousands of icons in five styles, available as SVGs, web fonts, and native components for Android, iOS, Flutter, and web projects.

## Install

Save as a script file and run:

# Material Design Icons — Google's Open Source Icon Set for Any Platform

## Quick Use
```bash
npm install material-design-icons
# Or use the web font via CDN:
# <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
# Then in HTML: <span class="material-icons">home</span>
```

## Introduction
Material Design Icons is Google's official icon library built for the Material Design system. It provides a consistent visual language across platforms and applications, with icons covering common actions, navigation, content types, and communication patterns.

## What Material Design Icons Does
- Provides 2,000+ icons covering common UI actions and concepts
- Offers five distinct styles: Filled, Outlined, Rounded, Sharp, and Two-Tone
- Ships as SVG files, web fonts, and platform-native resources
- Integrates with Android, iOS, Flutter, and web frameworks out of the box
- Follows Material Design guidelines for consistent sizing and optical alignment

## Architecture Overview
The repository contains icon sources organized by category and style variant. Each icon is available as an SVG master file from which platform-specific assets are generated. Web font builds package glyphs into WOFF2/WOFF files with accompanying CSS classes. Android and iOS resource directories provide density-specific PNGs and vector drawables.

## Self-Hosting & Configuration
- Install via npm, Bower, or download the release archive directly
- For web: include the CSS file and reference icons by ligature name or codepoint
- For Android: copy drawable resources or use the Maven dependency
- For Flutter: icons are bundled in the material library by default
- Custom builds can be created by selecting only the icons your project needs

## Key Features
- Five style variants per icon for design flexibility
- Variable icon font support with adjustable weight, grade, and optical size
- Pixel-perfect alignment at standard sizes (18, 24, 36, 48 dp)
- Apache 2.0 license allows commercial use without attribution
- Active maintenance with new icons added in each Material Design update

## Comparison with Similar Tools
- **Font Awesome** — broader general-purpose set with brand icons; Material focuses on UI actions
- **Lucide** — community fork of Feather with consistent stroke style; smaller set but very cohesive
- **Tabler Icons** — MIT-licensed stroke icons with consistent 24x24 grid; lighter weight
- **Heroicons** — Tailwind-aligned set by the Tailwind team; smaller but tightly curated
- **Phosphor Icons** — flexible weight system similar to variable fonts; six weights per icon

## FAQ
**Q: Can I use these icons in a commercial product?**
A: Yes. They are released under the Apache 2.0 license, which permits commercial use, modification, and redistribution.

**Q: How do I use variable icon fonts?**
A: Load the variable font CSS from Google Fonts and set font-variation-settings for weight, fill, grade, and optical size on the icon element.

**Q: Are the icons accessible?**
A: You should add aria-label or title attributes when icons convey meaning. Decorative icons should use aria-hidden="true".

**Q: How often are new icons added?**
A: Google updates the set alongside Material Design releases, typically adding dozens of new icons per update.

## Sources
- https://github.com/google/material-design-icons
- https://fonts.google.com/icons

---
Source: https://tokrepo.com/en/workflows/asset-e4a76fb5
Author: Script Depot