--- obj: concept website: https://fonts.google.com/icons repo: https://github.com/google/material-design-icons --- # Material Icons [Material Icons](https://fonts.google.com/icons) are a comprehensive set of visual symbols designed by Google. These icons follow the [Material Design](https://m3.material.io/) guidelines and are widely used across Android, web, and other platforms to provide a consistent, clean, and intuitive UI experience. ## Features * Over 2,000 icons * Available in multiple styles (Filled, Outlined, Rounded, Sharp, Two-tone) * Free and open-source under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) * Easily customizable (size, color, weight) * Supported via web fonts, SVGs, and icon components ## Icon Styles | Style | Description | | -------- | ----------------------------------------- | | Filled | Default solid icons | | Outlined | Icons with a thin, outlined design | | Rounded | Icons with rounded corners | | Sharp | Icons with sharp, angular edges | | Two-tone | Icons with dual-tone for visual hierarchy | ## Installation ### Web Font Add the following `<link>` tag to your HTML `<head>`: ```html <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> ``` Then use an icon like this: ```html <i class="material-icons">home</i> ``` To use other styles (e.g., Outlined, Rounded), change the font family: ```html <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> ``` Use it like: ```html <i class="material-icons-outlined">home</i> ``` ## SVG You can download individual icons as SVGs from [Material Icons](https://fonts.google.com/icons) or use them programmatically. Example: ```html <img src="https://fonts.gstatic.com/s/i/materialicons/home/v1/24px.svg" alt="home icon" /> ``` ## Customization ### Size Use CSS to change the size: ```html <i class="material-icons" style="font-size: 36px;">home</i> ``` Or use utility classes in frameworks like Tailwind: ```html <i class="material-icons text-4xl">home</i> ``` ### Color ```html <i class="material-icons" style="color: #f44336;">home</i> ```