Google Icons

You will be able to add and style Google Material Symbols icons in CSS by loading the icon font, defining a class, and using icon-name ligatures inside a span.

What it is

Google Icons, including Material Symbols and Icons, are icon sets served through Google Fonts. Material Symbols is the newer variable font family; Material Icons is an earlier static icon font. The browser displays an icon when you write a name such as favorite because the font contains a ligature: the letters are replaced by a single icon glyph.

Related terms: ligature, icon font, variable font, font-variation-settings, Material Symbols Outlined, Material Icons.

Why it matters

• Icons can inherit text color and size, making them easy to align with labels and buttons.
• One font file can provide many icons, reducing the need for separate image files.
• Variable axes let you adjust weight, fill, grade, and optical size with CSS.
• Icon names remain readable in HTML, which can help during development.
• They are useful for simple, single-color UI icons when accessibility is handled.

Syntax or steps

1. Load the Google Fonts stylesheet for the icon family.
2. Create a CSS class that sets font-family to the loaded icon font.
3. Add a span with that class and put the icon name inside it.
4. Style the icon with CSS properties such as font-size, color, and font-variation-settings.

Example

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">

<span class="material-symbols-outlined">favorite</span>

<style>
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-size: 32px;
  color: #d81b60;
  font-feature-settings: 'liga' 1;
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  line-height: 1;
  vertical-align: middle;
}
</style>

Part-by-part explanation:

• The link loads the Material Symbols Outlined font from Google Fonts.
• The span contains the ligature name favorite; it is not meant to be read as text.
• The CSS class is a hook. It sets font-family so the browser uses the icon font.
• font-size controls the icon size, and color controls the icon color.
• font-feature-settings: 'liga' 1; helps ensure ligatures are enabled.
• font-variation-settings changes variable font axes such as fill, weight, grade, and optical size.

Common mistakes

• Forgetting to load the Google Fonts stylesheet, so the browser shows the word favorite instead of an icon.
• Using a class name without defining font-family, so the icon font is not applied.
• Not hiding decorative icons from assistive technology; add aria-hidden="true" when the icon adds no meaning, and provide visible text or aria-label when it does.
• Using an icon name that does not exist in the selected family, which leaves the text visible.

When to use it

Use Google Icons when you need many simple UI icons quickly and want them to behave like text. Use inline SVG when you need custom artwork, multi-color icons, or assets that do not depend on a web font.

Practice

Guided exercise: Add a home icon before a navigation link and make it 20 pixels tall with the same color as the link text.

<span class="material-symbols-outlined" aria-hidden="true">home</span> Home

Expected result: a small house icon appears before the word Home.

Challenge: Change the icon to a filled style by setting 'FILL' 1 in font-variation-settings.

Quick check

Question: Why does the text favorite become an icon?

Answer: Because the loaded Material Symbols font replaces that letter sequence with an icon glyph using a ligature.

Summary

Google Icons turn readable icon names into glyphs through a web font and ligatures. In CSS, you style them like text, using size, color, and variable font settings. The key transferable idea is that icons can be treated as typographic content when loading and accessibility are handled.