material-symbols-class

This package builds on material-symbols and allows you to use icons directly through CSS classes. It also provides additional utilities and variations such as fill, grade, optical-size, weight, spin, and fix(consistent width), all applied via classes.

You can explore the Homepage to browse available icons and preview different utility classes in action.

The library stays up to date automatically with the latest changes from the source repository.

• 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: The different font/styles can be used with the full name or the short version, be default msc will refer to outlined

<span class="msc msc-face"></span>
<!-- Outlined default -->
<span class="msc-o msc-face"></span>
<!-- Outlined short class -->
<span class="msc-outlined msc-face"></span>
<!-- Outlined -->
<span class="msc-r msc-face"></span>
<!-- Rounded short class -->
<span class="msc-rounded  msc-face"></span>
<!-- Rounded -->
<span class="msc-s msc-face"></span>
<!-- Sharp short class -->
<span class="msc-sharp  msc-face"></span>
<!-- Sharp -->

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

<span class="msc-outlined msc-face msc-fill"></span>
<!-- 'FILL': 1 -->
<span class="msc-outlined msc-face msc-100"></span>
<!-- 'weight': 100 -->
<span class="msc-outlined msc-face msc-fill msc-100"></span>
<!-- 'FILL': 1 && 'weight': 300 -->
<span class="msc-outlined msc-face msc-spin"></span>
<!-- Spinning icon -->
<span class="msc-outlined msc-face msc-fix"></span>
<!-- Fixed width icon -->

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

.msc-outlined {
  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';

| Icons | CSS | Sass | | :------- | :----------- | :------------ | | Outlined | outlined.css | outlined.scss | | Rounded | rounded.css | rounded.scss | | Sharp | sharp.css | sharp.scss |

Using Sass

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

@import "material-symbols-class";

License

MIT License