Material Icons

Fontsource provides support for all variations of Material Icons. You can find more details on how to use the font variation of the project here.

Installation

To install Material Icons 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 Icons Round icon set, you would install the @fontsource/material-icons-round package.

2. Import Icon Set

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

⬤⬤

import "@fontsource/material-icons";
import "@fontsource/material-icons-round";
import "@fontsource/material-icons-outlined";
import "@fontsource/material-icons-sharp";
import "@fontsource/material-icons-two-tone";

jsx

3. Apply CSS class

To ensure proper rendering of the icons, include the following CSS class in your HTML file:

⬤⬤

.material-icons {
  font-family: 'Material Icons';
  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;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

css

You can learn more about styling Material Icons here.