Library comparison
Six libraries, one icon set
Each page renders the same 21 SVG files with a different Angular icon library, in batches you add one at a time. Profile them with your browser's devtools.
- Pick a library on the left.
- Choose a layout. Off screen and Distributed are where lazy loading matters.
- Open the Performance panel and start recording.
- Press Add a few times, then stop the recording and compare scripting, rendering and network.
Layouts
- On screen
- Icons start right below the controls.
- Off screen
- Icons start three viewports down, so none is visible until you scroll.
- Distributed
- Icons are spread out with large gaps, so only some are visible at a time.