material-symbols-class

This is a package that uses material-symbols to provide a way of using the icons just with classes.

• Installation
• Usage
• Available Icons

Installation

Install the [latest version][releases] using:

npm install material-symbols-class@latest

Usage

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

import "material-symbols-class";

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

@import "material-symbols-class";

or import in HTML:

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

To display an icon, use one of the following:

<span class="msc msc-face"></span>
<!-- Outlined -->
<span class="msc-rounded  msc-face"></span>
<!-- Rounded -->
<span class="msc-sharp  msc-face"></span>
<!-- Sharp -->

Adding the utils.css you can edit the fill and weight variables with classes too:

<span class="msc msc-face msc-fill"></span>
<!-- 'FILL': 1 -->
<span class="msc msc-face msc-100"></span>
<!-- 'weight': 100 -->
<span class="msc msc-face msc-fill msc-100"></span>
<!-- 'FILL': 1 && 'weight': 300 -->

To customize the variable font axes (fill, weight, grade, and optical size), use:

.msc {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

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-class';
+import 'material-symbols-class/outlined.css';

Using Sass

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

@import "material-symbols-class";

License

MIT License