# @whaaaley/material-icons-scss > Material design icon functions for SCSS Latest version **4.0.3** (published 2021-05-12) · ISC license · 0 weekly downloads ## Install ```sh npm install @whaaaley/material-icons-scss pnpm add @whaaaley/material-icons-scss yarn add @whaaaley/material-icons-scss bun add @whaaaley/material-icons-scss ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.0.3 | | Published | 2021-05-12 | | First published | 2020-12-23 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 7.8 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Author | Dustin Dowell | | Maintainers | whaaaley | | Keywords | design, extended, google, icon, icons, material, sass, scss, svg | ## Links - npm: https://www.npmjs.com/package/@whaaaley/material-icons-scss - Repository: https://github.com/whaaaley/material-icons-scss - Homepage: https://github.com/whaaaley/material-icons-scss#readme - Issues: https://github.com/whaaaley/material-icons-scss/issues - npm.io page: https://npm.io/package/@whaaaley/material-icons-scss ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads ## Recent versions - 4.0.3 (latest) — 2021-05-12 - 4.0.2 — 2021-05-11 - 4.0.1 — 2021-04-21 - 4.0.0 — 2021-04-20 - 3.0.1 — 2021-04-16 - 3.0.0 — 2021-04-16 - 2.2.0 — 2021-04-16 - 2.1.0 — 2021-04-09 - 2.0.10 — 2021-04-09 - 2.0.9 — 2021-04-09 - 2.0.8 — 2021-04-06 - 2.0.7 — 2021-04-06 - 2.0.6 — 2020-12-23 - 2.0.5 — 2020-12-23 - 2.0.4 — 2020-12-23 ## README # material-icons-scss > Material design icon functions for SCSS This project contains and generates SCSS functions that output SVG Data URLs using SVGs from the official [google/material-design-icons](https://github.com/google/material-design-icons) repository, optimized using [SVGO](https://github.com/svg/svgo) and this project. ## Notice You can see all the current icons in their data URL form at the following locations. + [stable/filled](https://demo-dist.netlify.app/stable/filled.html) + [stable/outlined](https://demo-dist.netlify.app/stable/outlined.html) + [stable/round](https://demo-dist.netlify.app/stable/round.html) + [stable/sharp](https://demo-dist.netlify.app/stable/sharp.html) + [stable/twotone](https://demo-dist.netlify.app/stable/twotone.html) + [extended/filled](https://demo-dist.netlify.app/extended/filled.html) + [extended/outlined](https://demo-dist.netlify.app/extended/outlined.html) + [extended/round](https://demo-dist.netlify.app/extended/round.html) + [extended/sharp](https://demo-dist.netlify.app/extended/sharp.html) + [extended/twotone](https://demo-dist.netlify.app/extended/twotone.html) ## Install ``` $ npm i @whaaaley/material-icons-scss ``` ## Setup If you're using the `dart-sass` CLI I recommend using the `--load-path` flag set to `node_modules`. Load paths add additional paths for Sass to look for stylesheets. ``` $ sass src/app.scss public/app.min.css --load-path=node_modules ``` If you're using `dart-sass`'s JavaScript API this is called `includePaths`. ```js const css = sass.renderSync({ file: 'src/app.js', includePaths: ['node_modules'] }) ``` ## Usage First, import a stylesheet of the icon style you'd like to use. Only import one of the following. The icons in `stable` are the 4.0.0 icons _only_ whereas the icons in `extended` include all the icons from 4.0.0 plus all the icons seen on Google fonts. Extended icons have not stabilized and may be subject to change. You can find a list of all available _extended_ icons, styles, and sizes on [Google Fonts.](https://fonts.google.com/icons?selected=Material+Icons) ```scss @import '@whaaaley/material-icons-scss/stable/filled'; @import '@whaaaley/material-icons-scss/stable/outlined'; @import '@whaaaley/material-icons-scss/stable/round'; @import '@whaaaley/material-icons-scss/stable/sharp'; @import '@whaaaley/material-icons-scss/stable/twotone'; @import '@whaaaley/material-icons-scss/extended/filled'; @import '@whaaaley/material-icons-scss/extended/outlined'; @import '@whaaaley/material-icons-scss/extended/round'; @import '@whaaaley/material-icons-scss/extended/sharp'; @import '@whaaaley/material-icons-scss/extended/twotone'; ``` Next, create an icon data URL by using one of the icon functions. Icon function names are prefixed with `ic`, names are kebab cased, and sizes can be 18px, 20px, or 24px. ``` ic-name-size($color) ``` In this example, I'm storing the SVG data URL in the variable `$icon-menu` then using that variable in the background URL function. ### Input: ```scss @import '@whaaaley/material-icons-scss/style/filled'; $red: #FF0000; $icon-menu: ic-menu-24px($red); .foobar { width: 24px; height: 24px; background: url($icon-menu) center no-repeat; } ``` ### Output: ```css .foobar { width: 24px; height: 24px; background: url('data:image/svg+xml;utf8,') center no-repeat; } ``` ## How to build This builds both `stable` and `extended` icon sets and demo files. **`Notice:`** Running `update_repo.py` can take over 2 hours to download all the files. ``` $ cd icons/stable $ git clone https://github.com/google/material-design-icons.git $ cd .. $ cd extended $ git clone https://github.com/google/material-design-icons.git $ cd material-design-icons/update $ pip3 install -r requirements.txt $ python3 update_repo.py $ cd ../../.. $ make optimize $ make build ``` --- _Source: https://npm.io/package/@whaaaley/material-icons-scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._