Angular Icon Library (set-agnostic) | ng-hub-ui-icons

Icon-set-agnostic Angular icons: render Font Awesome, Bootstrap Icons, Material Symbols, Solar or your own SVGs through one <hub-icon> / [hubIcon] API, themed with CSS variables.

Overview

Why teams search for this library

Use this Angular icon library when you want one API for any icon set — no hard dependency on a specific pack, mix sets freely, and theme them all through --hub-icon-* CSS variables.

Install

npm install ng-hub-ui-icons

Jump to

Ideal for

  • Use one icon API across an app that mixes Font Awesome and Material Symbols.
  • Theme every icon's size and color through CSS variables, with runtime dark mode.
  • Drop a <hub-icon> into any component — buttons, menus, links — by projection, with no adapter.
  • Register your own SVG pack to ship brand icons through the same component.

About icons

ng-hub-ui-icons decouples how you reference an icon from which set draws it. A pack is a pure resolver from name to a render spec; the library ships factories and presets for Font Awesome, Bootstrap Icons, Material Symbols and Solar but bundles none of them. The component and directive render class-based, ligature, sprite, inline-SVG or image icons, all themed uniformly through --hub-icon-* tokens.

Feature guides

Rendering icons

Render any icon set through one API — packs, variants and the [hubIcon] directive.

Examples:
Setup

Setup

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
Custom SVG

Custom SVG

SVG sprite

SVG sprite

Image

Image

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

Variants

FA solid / regular
MS outlined/round/sharp
Directive

Directive

HomesettingsSettingsDelete

Theming & integration

Theme every pack with --hub-icon-* tokens and render icons inside other ng-hub-ui components.

Examples:
Theming

Theming

Button integration

Button integration

Key features

Recent changes

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.

Related libraries

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