You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@material-symbols/font-400

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material-symbols/font-400

Latest variable icon fonts with weight 400 for Material Symbols.


Version published
Maintainers
1
Created

Readme

Source

@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 install size includes only fonts with grade (GRAD) 0 and optical size (opsz) 48px. For other variations, see material-symbols install size.

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

Installation

Install the latest version using:

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.

Show all packages
PackageWeight
@material-symbols/font-100100
@material-symbols/font-200200
@material-symbols/font-300300
@material-symbols/font-400400
@material-symbols/font-500500
@material-symbols/font-600600
@material-symbols/font-700700

Usage

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

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

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

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

or import in HTML:

<link href="/path/to/@material-symbols/font-400/index.css" rel="stylesheet">

To display an icon, use one of the following:

<span class="material-symbols-outlined">face</span> <!-- Outlined -->
<span class="material-symbols-rounded">face</span>  <!-- Rounded -->
<span class="material-symbols-sharp">face</span>    <!-- Sharp -->

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

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

Reducing Build Size

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:

-import '@material-symbols/font-400';
+import '@material-symbols/font-400/outlined.css';
Show all
IconsCSSSass
Outlinedoutlined.cssoutlined.scss
Roundedrounded.cssrounded.scss
Sharpsharp.csssharp.scss

Using Sass

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

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

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

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

Using Angular mat-icon

To display an icon, use one of the following:

<mat-icon fontSet="material-symbols-outlined">face</mat-icon>
<mat-icon fontSet="material-symbols-rounded">face</mat-icon>
<mat-icon fontSet="material-symbols-sharp">face</mat-icon>

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. 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.

Keywords

FAQs

Package last updated on 17 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc