# @webhandle/material-icons

> Some basic support for google's material icon set

Latest version **1.0.3** (published 2026-05-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install @webhandle/material-icons
pnpm add @webhandle/material-icons
yarn add @webhandle/material-icons
bun add @webhandle/material-icons
```

## Health

**Score 50/100 (C)** — status: active.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2026-05-07 |
| First published | 2026-02-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | dankolz |

## Links

- npm: https://www.npmjs.com/package/@webhandle/material-icons
- Repository: https://github.com/EmergentIdeas/webhandle-material-icons
- Homepage: https://github.com/EmergentIdeas/webhandle-material-icons#readme
- Issues: https://github.com/EmergentIdeas/webhandle-material-icons/issues
- npm.io page: https://npm.io/package/@webhandle/material-icons

## Dependencies (1)

- [@webhandle/initialize-webhandle-component](https://npm.io/package/@webhandle/initialize-webhandle-component.md) ^1.0.2

## Recent versions

- 1.0.3 (latest) — 2026-05-07
- 1.0.2 — 2026-05-07
- 1.0.1 — 2026-02-23
- 1.0.0 — 2026-02-23

## README

# @webhandle/material-icons
Some basic support for google's material icon set


clone the source at:

git clone https://github.com/google/material-design-icons/


Documentation at:

https://developers.google.com/fonts/docs/material_icons


Overview of icons at:

https://fonts.google.com/icons?selected=Material+Icons

## Install

```bash
npm i @webhandle/material-icons
```

## Usage


### Server Side

```js
import setupMaterialIcons from "@webhandle/material-icons/initialize-webhandle-component.mjs"
let managerMaterialIcons = await setupMaterialIcons(webhandle)
```

You have indicate you want the resources either by calling `addExternalResources` on the manager or in the html like

```html
__::@webhandle/material-icons/renderExternalResources__
```

To actually use the styles and icons, you have to either do something
like this on the page:

```html
<script type="module">
	import {loadMaterialIcons} from "@webhandle/material-icons"
	await loadMaterialIcons()
</script>
```

Or have them included on the server side like:
```js
webhandle.routers.preDynamic.use((req, res, next) => {
	managerMaterialIcons.addExternalResources(res.locals.externalResourceManager)
	next()
})

```


### HTML

Super simple. Just create an element like this.

```html
	<span class="material-icons">face</span>
```


### Build the styles into your stylesheet

The best way is just build the couple styles you need by including the less
stylesheet from the package. If you do that, you DO NOT need to do the 
"load dynamically" steps from below.

Include in your less files like:

```less
@import "../node_modules/@webhandle/material-icons/public/css/material-icon.css";
```

That should resolve to the global location without duplicates so long as it doesn't install
into the the sub package as well.

Or with a script tag on page like:

```html
<script type="module" src="/@webhandle/material-icons/files/js/load-styles.mjs"></script>
```

### Configuration 

```json
{
	"@webhandle/material-icons": {
		"publicFilesPrefix": "/@webhandle/material-icons/files"
		, "provideResources": true
	}
}
```

---
_Source: https://npm.io/package/@webhandle/material-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._