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

__::@webhandle/material-icons/renderExternalResources__

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

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

Or have them included on the server side like:

webhandle.routers.preDynamic.use((req, res, next) => {
	managerMaterialIcons.addExternalResources(res.locals.externalResourceManager)
	next()
})

HTML

Super simple. Just create an element like this.

	<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:

@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:

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

Configuration

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