Icons

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

Icon component

The Icon component is a wrapper around the Material Symbols font. To use it, you need to load the font in your app.html file. You can host the font on your own or load it from Google Fonts. Only add the icons to the font that you actually need. The example below shows how to load 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" />

Now you can use the icon, for example, in combination with an IconButton or a TextField.

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

You can also control the font settings, for example, for animations. Click on the following IconButton to see the animation:

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

SVG icons

To use custom SVG icons, you can import them or use inline SVGs as shown below:

<IconButton>
	<svg
		xmlns="http://www.w3.org/2000/svg"
		height="24px"
		viewBox="0 -960 960 960"
		width="24px"
		fill="undefined"
	>
		<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>