Icons

There are two ways to use icons in Noph UI: the Icon component or custom SVG icons.

Icon component

The Icon component wraps the Material Symbols font. Load the font in your app.html file. You can host it yourself or load it from Google Fonts. Only include the icons you need. The example below loads the font with the search icon.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=search" />

You can then use the icon, for example in an IconButton or a TextField.

<script lang="ts">
	import { IconButton, TextField } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<IconButton variant="filled"><Icon>search</Icon></IconButton>
<TextField label="Search">{#snippet start()}<Icon>search</Icon>{/snippet}</TextField>

You can also change the font settings, for example to animate the icon. Click the IconButton below to see the animation:

<script lang="ts">
	import { IconButton } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'

	let toggleFilled = $state(false)
</script>

<IconButton onclick={() => (toggleFilled = !toggleFilled)}>
	<Icon --np-icon-settings={toggleFilled ? "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" : undefined}>
		favorite
	</Icon>
</IconButton>

SVG icons

To use custom SVG icons, import them or use inline SVGs:

<IconButton>
	<svg
		xmlns="http://www.w3.org/2000/svg"
		height="24px"
		viewBox="0 -960 960 960"
		width="24px"
		fill="currentColor"
	>
		<path
			d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"
		/>
	</svg>
</IconButton>