https://github.com/jsweb/material-icons-base64
Material Icons compiled with base64 embedded font to CSS instead of link to font files.
https://github.com/jsweb/material-icons-base64
Last synced: 12 months ago
JSON representation
Material Icons compiled with base64 embedded font to CSS instead of link to font files.
- Host: GitHub
- URL: https://github.com/jsweb/material-icons-base64
- Owner: jsweb
- License: mit
- Created: 2019-12-27T15:17:20.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2022-08-16T14:23:47.000Z (almost 4 years ago)
- Last Synced: 2025-05-17T01:19:09.853Z (about 1 year ago)
- Language: JavaScript
- Size: 458 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @jsweb/material-icons-base64 
Material Icons compiled with WOFF2 base64 embedded fonts to CSS instead of link to font files.
## About
This compilation uses original files from Google Fonts and a little magic through a custom build using PostCSS to embed the font file in CSS as base64 string.
Only WOFF2 fonts are included to minify the compiled CSS at most as possible, and because WOFF2 is supported by all modern major browsers.
Web projects are the target. Especially mobile web view apps and PWA with offline capabilities, caching the CSS icons lib easily.
IE compatibility is not a concern (it is dead, accept it). For a compatibility reference see the link:
[Can I use - WOFF2](http://caniuse.com/#search=woff2)
## Install
### NPM
`npm i -S @jsweb/material-icons-base64`
### Yarn
`yarn add @jsweb/material-icons-base64`
### PNPM
`pnpm add @jsweb/material-icons-base64`
## Usage
CSS compilations in this package:
- `md-icons.css`, class `material-icons`, for Material Icons Filled (169 KB)
- `md-icons-outlined.css`, class `material-icons-outlined`, for Material Icons Outlined (203 KB)
- `md-symbols-outlined.css`, class `material-symbols-outlined`, for Material Symbols Oulined (266 KB)
- `md-symbols-rounded.css`, class `material-symbols-rounded`, for Material Symbols Rounded (305 KB)
If you are using a build tool for CSS compilation, just import the file you want in your CSS, like this:
```css
@import '@jsweb/material-icons-base64/md-icons.css';
```
If you prefer to link the files from the CDN source, you can do it like this:
```html
```
So, just code your icon tags like this:
```html
home
```
## Icons
You can check the icons at Google Fonts index:
- [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons)
- [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols)