Icons Google Material Icons
Google Material Icons is a free icon set from Google Fonts that works in an unusual way: you write the plain-English name of the icon as text, and the font itself swaps that text for a picture.
What Are Google Material Icons?
Material Icons is Google's free, open-source icon set built to match the Material Design guidelines. It is distributed through Google Fonts, so it loads the same way a Google web font does - with a stylesheet link in your document's head.
Loading Material Icons
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<span class="material-icons">star</span>
<span class="material-icons">favorite</span>
<span class="material-icons">home</span>
</body>
</html>How the Ligature Trick Works
Bootstrap Icons and Font Awesome hide a secret character behind a CSS content rule, but Material Icons does something different: the text inside the <span> is the real, readable name of the icon, like star or favorite. The Material Icons font defines a typographic feature called a ligature that recognizes that exact word and swaps it for the icon's picture when the browser renders it.
Material Symbols: the Newer, Variable Version
Google now also publishes Material Symbols, a newer variable-font version of the same icon set. Material Symbols comes in Outlined, Rounded, and Sharp styles, and its weight, fill, and grade can be fine-tuned with CSS instead of needing a separate font file for every variation.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">
</head>
<body>
<span class="material-symbols-outlined">favorite</span>
</body>
</html>Exercise: Icons Google
How do you specify which icon to display when using Google's Material Icons?
