Icon
Icons are small visual elements, like symbols, that represent certain functions, features, or types of content within a user interface.
import {IconDirective} from "@qualcomm-ui/angular/icon"Overview
QUI components use icons from Lucide, an open-source fork of Feather Icons.
Many components like the Button, Icon Button, and Text Input have built-in support for Lucide Icons.
Examples
Provider
Use the provideIcons utility function to register icons. Provided icons are matched by their string name.
import {Component} from "@angular/core"
import {ExternalLink, MonitorSpeaker, SatelliteDish} from "lucide-angular"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
import {IconDirective} from "@qualcomm-ui/angular/icon"
@Component({
imports: [IconDirective],
providers: [provideIcons({ExternalLink, MonitorSpeaker, SatelliteDish})],
selector: "icon-provider-demo",
standalone: true,
template: `
<div class="text-foreground-primary flex justify-center gap-4">
<svg aria-label="Link" qIcon="ExternalLink" size="lg"></svg>
<svg aria-label="Search" qIcon="MonitorSpeaker" size="lg"></svg>
<svg aria-label="Eye" qIcon="SatelliteDish" size="lg"></svg>
</div>
`,
})
export class IconProviderDemo {}Sizes
Size can be customized using the size input. There are five available values: xs, sm, md, lg, xl. Should you need more control over the rendered size, supply a number instead which will be converted to pixels.
<svg qIcon="ExternalLink" size="32px"></svg>
<svg qIcon="ExternalLink" size="42px"></svg>
API
svg[qIcon]
The properties of the <svg> element also apply.
Type
| LucideIconData
| string
Description
Lucide Icon or string.
Type
| string
| number
Description
Force the height of the icon. This typically isn't required. You should prefer
the size property for customization instead.
Type
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| string
| number
Description
Type
| string
| number
Description
Force the width of the icon. This typically isn't required. You should prefer
the size property for customization instead.
Last updated on by Olaf Kappes