@material-symbols/font-400

Latest variable icon fonts with weight 400 for Material Symbols.

> This package is automatically updated, so it will always have the latest icons from Google.

> This package  includes only fonts with grade (GRAD) 0 and optical size (opsz) 48px. For other variations, see material-symbols .

> For SVGs, see @material-symbols/svg-400

- Installation
- Usage
- Available Icons

Installation

Install the [latest version][releases] using:

``sh
npm install @material-symbols/font-400@latest
`

The package @material-symbols/font-400 includes only fonts with weight 400. To use a different weight, replace 400 in the package name with the desired weight.

Usage

Import in JS (example: src/index.js in Create React App, src/main.js in Vue CLI):

`js
import '@material-symbols/font-400';
`

or import in CSS (example: src/styles.css in Angular CLI):

`css
@import '@material-symbols/font-400';
`

or import in HTML:

`html

`

To display an icon, use one of the following:

`html
face
face
face
`

To customize the variable font axes (fill), use:

`css
.material-symbols-outlined {
font-variation-settings: 'FILL' 0;
}
`

$3

The default index.css includes CSS for all fonts. This may cause build tools such as webpack to copy all fonts to the build directory even if you are not using all of them. To reduce the build size, import only the styles you need. For example, if you only need outlined icons, import outlined.css instead of the default index.css:

`diff
-import '@material-symbols/font-400';
+import '@material-symbols/font-400/outlined.css';
`

$3

Import in Sass (example: src/styles.scss in Angular CLI):

`scss
@import '@material-symbols/font-400';
`

If you are getting errors with webpack or Vue CLI, add this line before importing:

`scss
$material-symbols-font-path: '~@material-symbols/font-400/';
`

$3

To display an icon, use one of the following:

`html
face
face
face
``

Available Icons

See [demo].

License

Material Symbols are created by Google.

> We have made these icons available for you to incorporate into your products under the [Apache License Version 2.0][license]. Feel free to remix and re-share these icons and documentation in your products.
We'd love attribution in your app's about screen, but it's not required.

[releases]: https://github.com/marella/material-symbols/releases
[license]: https://github.com/marella/material-symbols/blob/main/font/400/LICENSE
[demo]: https://marella.github.io/material-symbols/demo/