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.

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-icons

Ir 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

Default pack (fa)<hub-icon name="house" />
Explicit pack="bi"pack="bi"
Explicit pack="ms"pack="ms"
Shorthandname="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 Bootstrap Icons Material Symbols Solar
Font Awesome

Font Awesome

Solid
Regular
Brands
Spin
Bootstrap Icons

Bootstrap Icons

Outline
Filled (-fill)
Material Symbols

Material Symbols

Glyphs
Families
FILL axis
Solar

Solar

Bold
Families
SVG propio

SVG propio

Sprite SVG

Sprite SVG

Imagen

Imagen

es flagfr flagde flagjp flagus flagbr flag
es flages flages flag
Variantes

Variantes

FA solid / regular
MS outlined/round/sharp
Directiva

Directiva

HomesettingsSettingsDelete

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.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.

Librerías relacionadas

ng-hub-ui-buttons ng-hub-ui-badges ng-hub-ui-nav