Material Symbols

Material Symbols are available in two primary formats: variable icon fonts and optimized SVGs. You can choose a package based on your preferred delivery method and the specific font weight required.

Icon Fonts

Use the material-symbols package for the latest variable icon fonts and CSS, or select a specific weight package if you want to bundle only a single weight to reduce bundle size:

• material-symbols: Latest variable icon fonts and CSS.
• @material-symbols/font-100 through @material-symbols/font-700: Specific weight icon fonts (e.g., @material-symbols/font-400).

Optimized SVGs

If you prefer using SVGs instead of fonts, use the @material-symbols/svg-{weight} packages. These provide optimized SVGs for specific weights:

• @material-symbols/svg-100 through @material-symbols/svg-700 (e.g., @material-symbols/svg-400).

Material Symbols are provided in three styles: outlined, rounded, and sharp. Each icon is available in two states: unfilled (FILL 0) and filled (FILL 1).

SVGs are located using the following path pattern:

• Unfilled: @material-symbols/svg-200/{style}/{icon}.svg
• Filled: @material-symbols/svg-200/{style}/{icon}-fill.svg

Note: All SVGs in this package use weight 200, grade (GRAD) 0, and size (opsz) 48px.

// Example paths for the 'face' icon
@material-symbols/svg-200/outlined/face.svg      /* Fill 0 */
@material-symbols/svg-200/outlined/face-fill.svg /* Fill 1 */
@material-symbols/svg-200/rounded/face.svg       /* Fill 0 */
@material-symbols/svg-200/rounded/face-fill.svg  /* Fill 1 */
@material-symbols/svg-200/sharp/face.svg         /* Fill 0 */
@material-symbols/svg-200/sharp/face-fill.svg    /* Fill 1 */

Material Symbols are provided in three styles: outlined, rounded, and sharp. Each icon is available in two states: unfilled (FILL 0) and filled (FILL 1).

All SVGs use a grade (GRAD) of 0 and an optical size (opsz) of 48px. The file structure follows this pattern:

@material-symbols/svg-400/{style}/{icon}.svg      /* Fill 0 */
@material-symbols/svg-400/{style}/{icon}-fill.svg /* Fill 1 */

Example paths for the face icon:

• @material-symbols/svg-400/outlined/face.svg (Unfilled)
• @material-symbols/svg-400/outlined/face-fill.svg (Filled)

Install the latest version of the material-symbols package using npm:

npm install material-symbols@latest

Import the font in your .scss files. If you encounter errors with webpack or Vue CLI, you must define the $material-symbols-font-path variable before the import.

// Fix for webpack/Vue CLI errors
$material-symbols-font-path: '~@material-symbols/font-300/';
@import '@material-symbols/font-300';

Install the latest version of the metadata package using npm:

npm install @material-symbols/metadata@latest

Material Symbols are provided in three styles: outlined, rounded, and sharp. Each icon is available in two states: unfilled (FILL 0) and filled (FILL 1).

SVGs are organized in the following directory structure:

• @material-symbols/svg-300/{style}/{icon}.svg (Unfilled/Fill 0)
• @material-symbols/svg-300/{style}/{icon}-fill.svg (Filled/Fill 1)

Note: These SVGs are fixed at grade (GRAD) 0 and size (opsz) 48px to minimize package size.

// Example path structure for the 'face' icon
@material-symbols/svg-300/outlined/face.svg      /* Fill 0 */
@material-symbols/svg-300/outlined/face-fill.svg /* Fill 1 */
@material-symbols/svg-300/rounded/face.svg       /* Fill 0 */
@material-symbols/svg-300/rounded/face-fill.svg /* Fill 1 */
@material-symbols/svg-300/sharp/face.svg        /* Fill 0 */
@material-symbols/svg-300/sharp/face-fill.svg  /* Fill 1 */

Install the latest version of the weight 400 SVG package using npm:

npm install @material-symbols/svg-400@latest

To use a different weight, replace 400 in the package name with the desired weight (e.g., @material-symbols/svg-100, @material-symbols/svg-700).

Install the latest version of the weight 100 font package using npm. Note that this specific package only includes fonts with weight 100, grade (GRAD) 0, and optical size (opsz) 48px. To use a different weight, install the corresponding package (e.g., @material-symbols/font-400).

npm install @material-symbols/font-100@latest

Import the package in your Sass files:

@import 'material-symbols';

If you encounter errors with webpack or Vue CLI, define the font path before the import:

$material-symbols-font-path: '~material-symbols/';
@import 'material-symbols';

To make icons responsive to text properties, set the SVG width and height to 1em. To allow color control via the CSS color property, set the fill to currentColor.

.App svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

Material Symbols are provided in three styles: outlined, rounded, and sharp. Each icon is available in two states: unfilled (FILL 0) and filled (FILL 1).

All SVGs in this package use a grade (GRAD) of 0 and a size (opsz) of 48px. The file structure follows this pattern:

@material-symbols/svg-500/{style}/{icon}.svg (Unfilled) @material-symbols/svg-500/{style}/{icon}-fill.svg (Filled)

Example paths for the face icon:

• @material-symbols/svg-500/outlined/face.svg (Unfilled)
• @material-symbols/svg-500/outlined/face-fill.svg (Filled)
• @material-symbols/svg-500/rounded/face.svg (Unfilled)
• @material-symbols/svg-500/rounded/face-fill.svg (Filled)
• @material-symbols/svg-500/sharp/face.svg (Unfilled)
• @material-symbols/svg-500/sharp/face-fill.svg (Filled)