@material-symbols/font-300
v0.27.2
Published
Latest variable icon fonts with weight 300 for Material Symbols.
Downloads
5,116
Maintainers
Readme
@material-symbols/font-300
Latest variable icon fonts with weight 300 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, seematerial-symbols
.
For SVGs, see
@material-symbols/svg-300
Installation
Install the latest version using:
npm install @material-symbols/font-300@latest
The package @material-symbols/font-300
includes only fonts with weight 300. To use a different weight, replace 300
in the package name with the desired weight.
| Package | Weight |
| :--------------------------------------------------------------------------------------- | :----- |
| @material-symbols/font-100
| 100 |
| @material-symbols/font-200
| 200 |
| @material-symbols/font-300
| 300 |
| @material-symbols/font-400
| 400 |
| @material-symbols/font-500
| 500 |
| @material-symbols/font-600
| 600 |
| @material-symbols/font-700
| 700 |
Usage
Import in JS (example: src/index.js
in Create React App, src/main.js
in Vue CLI):
import '@material-symbols/font-300';
or import in CSS (example: src/styles.css
in Angular CLI):
@import '@material-symbols/font-300';
or import in HTML:
<link href="/path/to/@material-symbols/font-300/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-300';
+import '@material-symbols/font-300/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/font-300';
If you are getting errors with webpack or Vue CLI, add this line before importing:
$material-symbols-font-path: '~@material-symbols/font-300/';
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.