Material Symbols

Fontsource now supports Material Symbols, a new icon set with variable font support. Material Symbols offers various icons with customizable attributes such as FILL, wght, GRAD, and opsz. This allows you to create dynamic and visually appealing icons in your web applications.

Installation

To install Material Symbols from Fontsource, follow the steps below:

1. Install Icon Set

Install the desired icon set from Fontsource using your package manager of choice. For example, if you want to use the Material Symbols Round icon set, you would install the @fontsource-variable/material-symbols-rounded package.

2. Import Icon Set

In your application’s entry file or component, import the font variation you installed. For example:

⬤⬤

import "@fontsource-variable/material-symbols-outlined";
import "@fontsource-variable/material-symbols-rounded";
import "@fontsource-variable/material-symbols-sharp";

jsx

You can import individual axes or the whole set with these examples:

⬤⬤

import "@fontsource-variable/material-symbols-outlined/fill.css";
import "@fontsource-variable/material-symbols-rounded/opsz.css";
import "@fontsource-variable/material-symbols-sharp/full.css";

jsx

Please refer to the Variable Fonts guide for more information on using variable fonts.

If you do not need the variable font support, you can import the standard font variation instead:

⬤⬤

import "@fontsource/material-symbols-outlined";
import "@fontsource/material-symbols-rounded";
import "@fontsource/material-symbols-sharp";

jsx

3. Apply CSS class

To ensure proper rendering of the icons, include the following CSS class in your HTML file. You can use the same class or create different classes for each icon set:

⬤⬤

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

css

By applying the .material-symbols-outlined class to the relevant elements, you can utilize the Material Symbols Outlined font in your application.

You can learn more about styling Material Symbols here.