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.
API reference
Here's the full contract for icons: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.
Inputs
Dial icons in with 9 inputs. Bind them like any Angular @Input.
| Name | Type | Default | Description |
|---|---|---|---|
name (hub-icon)Required | string | — | Icon name. Accepts the pack:variant:name shorthand. |
name ([hubIcon]) | string | '' | Icon name on the [hubIcon] directive. Optional: when omitted, the value bound to the directive itself is used. |
hubIcon ([hubIcon]) | string | '' | Icon name bound through the directive attribute, [hubIcon]="'house'". The name input wins when both are set. |
pack | string | defaultPack | Pack key; overrides a shorthand pack and the configured defaultPack. |
variant | string | — | Variant; overrides a shorthand variant and the pack default. |
size (hub-icon) | string | 1em | Per-instance size, written to --hub-icon-size (hub-icon only). |
color (hub-icon) | string | currentColor | Per-instance color, written to --hub-icon-color (hub-icon only). |
label | string | — | Accessible label: sets role="img" + aria-label; without it the icon is decorative. Available on hub-icon and [hubIcon]. |
spin (hub-icon) | boolean | false | Continuously rotate the icon, e.g. for loaders (hub-icon only). |
Outputs
No outputs documented yet.
Templates
No templates documented yet.