Material icons and Symbols

import { MaterialMaterialSymbol } from "react-md"

<MaterialSymbol name="air" />

Add the variable font stylesheet request to your head tag.

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

You might need to add the following CSS to force the material symbol to use the correct font size.

@use "@react-md/core";

[class*="material-"] {
  @include everything.icon-use-var(font-size, size);
}

Alternatively, the current configuration can be loaded as a static font instead of a variable one.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />