74 lines
2.2 KiB
Markdown
74 lines
2.2 KiB
Markdown
---
|
|
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>
|
|
```
|