Useful Imports
Google Fonts Material Icons
Material Icons are available in five styles. The icons are based on the core Material Design principles and metrics.
Types & Import Links
There are five types of Google’s Material Icons
| Type | Import Link |
|---|---|
| Filled | <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"> |
| Outlined | <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet"> |
| Two Tone | <link href="https://fonts.googleapis.com/css?family=Material+Icons+Two+Tone" rel="stylesheet"> |
| Rounded | <link href="https://fonts.googleapis.com/css?family=Material+Icons+Round" rel="stylesheet"> |
| Sharp | <link href="https://fonts.googleapis.com/css?family=Material+Icons+Sharp" rel="stylesheet"> |
| Type | Example |
|---|---|
| Filled | <span class="material-icons">content_copy</span> |
| Outlined | <span class="material-icons-outlined">content_copy</span> |
| Two Tone | <span class="material-icons-two-tone">content_copy</span> |
| Rounded | <span class="material-icons-round">content_copy</span> |
| Sharp | <span class="material-icons-sharp">content_copy</span> |
Import Link for All Five Types Of Material Icons
<link
href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet"
/>
You can simply combine the types by pipe | separator.