Icon components render icons.
Unlike icon fonts, which only render icons available in specific fonts, Iconify icon components are not tied to specific icon set.
Icon components do not include data for icons.
All icon components rely on Iconify API to dynamically load icon data as needed.
They fetch icons as needed from Iconify API, so developers do not need to create icon bundles and visitors don't need to load icons that are not rendered. Because of this, Iconify icon components are very easy to use. Developers do not need to keep track of icons used in project.
There are several downsides to using API:
If you want to make sure icon data is always available and component is usable offline, do not rely on Iconify API. Even though Iconify API servers have redundancies built in to provide as stable experience as possible, internet is never 100% reliable.
SVG framework and all components have alternative bundles without API support. They rely on developer providing icon data. They are a bit harder to work with because you need to bundle icon data with package. These components get icon data from icon components and icon bundles.
Iconify SVG framework is a modern replacement for outdated icon fonts.
It offers all the advantages of icons fonts:
- Syntax is very simple and similar to icon fonts: <span class="iconify" data-icon="mdi:home"></span>.
- You can change size and color by changing font-size and color in stylesheet.
It does not have disadvantages of icons fonts:
- Framework renders pixel-perfect SVG, not blurred glyphs.
- Only icons that are used on page are loaded. This means no bandwidth wasted on loading icons you do not need. This also made it possible to offer over 100k icons.
For more details, see Iconify SVG framework.
Iconify offers components for several popular component frameworks:
All icon components support loading icon data on demand from Iconify API.
Unlike SVG framework, other icon components are designed for specific component frameworks:
- Components use syntax familiar to developers.
- Components use framework's native code to render icons.
- Most components correctly bind event handlers and dynamic properties. SVG framework cannot do that.
- Components render icons regardless of parent element, making it perfect for use in things like Shadow DOM. SVG framework only scans placeholders in document.body (unless configured otherwise, but components do that without additional configuration).
All icon components share common code, making it easy to maintain multiple icon components for multiple frameworks and provide identical functionality. They also share code with Iconify SVG framework.
You can find code and demo files in big monorepo: https://github.com/iconify/iconify.