# recipes/icons
One page, three ways of naming an icon, and the bundle weighed after.
- **Written out**: ``. The build turns that literal into an import of
that one icon.
- **A standard name**: `` puts the set's standard selection up, and
`` inside a `Button` finds it there.
- **Fetched when the page runs**: a name the source does not contain, resolved by `fromUrl`
against a route this recipe serves, in the shape the public icon APIs answer in.
## See it
```
npx vite recipes/icons
```
The icon route is only in `main.ts`, so the third icon does not draw under `vite` on its own. The
other two do, and they are the ones the build decides.
## What the gate does with it
```
node --import @aweftjs/build/loader recipes/icons/main.ts
```
Builds the page with vite through `aweft()`, weighs the bundle, renders the same page to markup
with no browser at all, takes that markup over in place, and then drives it in Chromium.
The weighing is the point. It asks the installed set which of its 1,884 icons appear in the
bundle, by looking for each icon's own path data, and the answer has to be exactly the nine the
page named: nothing else from the set, and not the one the page only asks for when it runs.
Measured: a 101,804 byte bundle, of which 1,792 bytes is icon data, against a set that is
594,684 bytes.
It also asserts that the render waited for the fetch (the markup carries the fetched drawing) and
that the icon route was asked for exactly one name.
The hydration is checked by identity, not by comparing descriptions: two elements with the same
attributes are equal and are still two elements. Every element the server wrote outside an `