diff --git a/technology/dev/Material Icons.md b/technology/dev/Material Icons.md new file mode 100644 index 0000000..c44bee3 --- /dev/null +++ b/technology/dev/Material Icons.md @@ -0,0 +1,74 @@ +--- +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 `` tag to your HTML ``: + +```html + +``` + +Then use an icon like this: +```html +home +``` + +To use other styles (e.g., Outlined, Rounded), change the font family: +```html + +``` + +Use it like: +```html +home +``` + +## SVG +You can download individual icons as SVGs from [Material Icons](https://fonts.google.com/icons) or use them programmatically. + +Example: +```html +home icon +``` + +## Customization + +### Size +Use CSS to change the size: +```html +home +``` + +Or use utility classes in frameworks like Tailwind: +```html +home +``` + +### Color +```html +home +```