Librería de iconos para Angular (agnóstica) | ng-hub-ui-icons
Iconos para Angular agnósticos al set: renderiza Font Awesome, Bootstrap Icons, Material Symbols, Solar o tus propios SVG con una sola API <hub-icon> / [hubIcon], tematizados con variables CSS.
Última actualización 6 sept 2026
Visión General
Por qué los equipos buscan esta librería
Usa esta librería de iconos para Angular cuando quieras una sola API para cualquier set — sin dependencia dura de un pack concreto, mezclando sets libremente y tematizándolos con variables CSS --hub-icon-*.
Instalación
npm install ng-hub-ui-iconsIr a
Ideal para
- Usa una sola API de iconos en una app que mezcla Font Awesome y Material Symbols.
- Tematiza el tamaño y el color de cada icono con variables CSS, con modo oscuro en tiempo de ejecución.
- Coloca un <hub-icon> en cualquier componente — botones, menús, enlaces — por proyección, sin adapter.
- Registra tu propio pack de SVG para servir iconos de marca con el mismo componente.
Sobre icons
ng-hub-ui-icons desacopla cómo referencias un icono de qué set lo dibuja. Un pack es un resolver puro de nombre a spec de render; la librería trae factorías y presets para Font Awesome, Bootstrap Icons, Material Symbols y Solar, pero no empaqueta ninguno. El componente y la directiva renderizan iconos por clase, ligadura, sprite, SVG inline o imagen, todos tematizados de forma uniforme con tokens --hub-icon-*.
Guías de uso
Renderizado de iconos
Renderiza cualquier set de iconos con una sola API — packs, variantes y la directiva [hubIcon].
Ejemplos:
Configuración
Configuración
<hub-icon name="house" />pack="bi"pack="ms"name="fa:brands:github"Built-in presets — load the set's stylesheet once, then register its pack. Any other set works via a custom pack.
Font Awesome
Font Awesome
Bootstrap Icons
Bootstrap Icons
Material Symbols
Material Symbols
Solar
Solar
SVG propio
SVG propio
Sprite SVG
Sprite SVG
Imagen
Imagen
Variantes
Variantes
Theming e integración
Tematiza todos los packs con tokens --hub-icon-* y renderiza iconos dentro de otros componentes de ng-hub-ui.
Ejemplos:
Theming
Theming
Integración con botones
Integración con botones
Características clave
Cambios recientes
Version 22.1.3 - 9/6/26, 12:00 AM
added: FUNCTIONALITIES.md, the per-feature coverage table the rest of the ecosystem ships, so a reader can see what the library does and which parts a live example actually demonstrates instead of inferring both from the list of examples.
fixed: The cssVars bridge now follows the pack that actually draws the icon. resolve() expands the pack:variant:name shorthand but the bridge lookup read the pack input alone, so an icon written with the shorthand was dressed with the default pack's custom properties, or with none, while binding the pack explicitly got the right ones. HubIconRegistry.cssVars() takes the icon name as an optional second argument so both entry points expand the same reference the same way and existing calls keep working. Latent for consumers of the shipped presets, none of which declares a bridge, and breaking for anyone who wrote a pack with one and used the documented shorthand.
fixed: The input table now describes the directive as well as the component. name was listed as required for both forms, but on [hubIcon] it is optional and falls back to the value bound to the directive, and hubIcon itself appeared in no table at all, so the only way to learn it existed was to read the source. The documentation links pointed at the site root too, leaving the reader to hunt for the icons page, and now open it directly.
fixed: The stylesheets are reachable by the subpath the README documents. The manifest declared no exports, so ng-packagr generated the minimal map and every sheet shipped in styles/ stayed outside the package's public surface. Resolvers that fall back to the filesystem found them anyway, which is why nobody noticed, while anything resolving strictly through exports answered ERR_PACKAGE_PATH_NOT_EXPORTED on the very line the docs tell you to write. The styles subpath now resolves, along with the icon, icon-base and icon-theme sheets.
Version 22.1.2 - 9/1/26, 12:00 AM
changed: The package manifest's homepage now points at this library's own documentation page instead of the site root, so the link a registry shows beside the package lands on the reference the reader was already after.
Version 22.1.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.1.0 - 7/7/26, 12:00 AM
added: hub-icon-theme(...) mixin — one-call token theming for <hub-icon> / [hubIcon]: color, size, and the variable-font axes weight / fill / grade / optical-size. Null-defaulted and additive; @use 'ng-hub-ui-icons/styles' as *;.
Version 22.0.0 - 7/1/26, 12:00 AM
added: Initial release: <hub-icon> component and [hubIcon] directive, agnostic to the icon set.
added: provideHubIcons pack registry; classPack / ligaturePack / svgPack factories and faPack / bootstrapPack / materialSymbolsPack / solarPack presets.
added: Uniform --hub-icon-* theming (size, color and variable-font axes), so one token set themes every pack identically.