Import
import { IconModule } from "@backbase/ui-ang/icon";
Usage
Use the bb-icon-ui component to render an icon and access its API.
<bb-icon-ui name="favourite" size="xxl" color="primary"></bb-icon-ui>
Inputs
This component is based on the span element.
|
Prop |
Type |
Default |
|---|---|---|
|
animate |
boolean |
false |
|
backgroundType (deprecated) |
"circle" | "square" |
— |
|
color |
string |
— |
|
cropped |
boolean | string |
false |
|
flipOnRtl |
boolean |
false |
|
inverse (deprecated) |
boolean |
false |
|
name |
string |
— |
|
size |
"sm" | "md" | "lg" | "xl" | "xxl" |
"md" |
animate
The animate input sets whether the icon should be animated. By default, this triggers a continuous counter-clockwise spinning animation that rotates the icon 360 degrees over 2 seconds. This is useful for building loading states and indicating ongoing processes.
<!-- Animated spinning icon -->
<bb-icon-ui name="loading" [animate]="true"></bb-icon-ui>
backgroundType
The backgroundType input sets whether the icon has a background. You can choose from two different shapes of backgrounds — circle and square.
<!-- Icon with no background (default) -->
<bb-icon-ui name="warning"></bb-icon-ui>
<!-- Icon with circular background -->
<bb-icon-ui name="warning" backgroundType="circle"></bb-icon-ui>
<!-- Icon with square background -->
<bb-icon-ui name="warning" backgroundType="square"></bb-icon-ui>
color
The color input sets the color of the icon represented as a color name contained in your theme.
<!-- Warning colored icon -->
<bb-icon-ui name="warning" color="warning"></bb-icon-ui>
cropped
The cropped input sets whether the icon should be cropped horizontally. This is useful when you need to fit icons into constrained horizontal spaces or when creating compact layouts where standard icon padding would cause alignment issues.
<!-- Cropped icon -->
<bb-icon-ui name="warning" [cropped]="true"></bb-icon-ui>
flipOnRtl
The flipOnRtl input sets whether the icon should automatically flip its orientation when the page direction is right-to-left (RTL). Use this to ensure directional icons (such as arrows) display correctly for RTL languages and layouts.
<!-- Icon that flips in RTL -->
<bb-icon-ui name="arrow-right" [flipOnRtl]="true"></bb-icon-ui>
inverse
The inverse input sets whether to use white background and inverse icon colors.
<!-- Inverse colored icon -->
<bb-icon-ui name="warning" [inverse]="true"></bb-icon-ui>
name
The name input sets the icon to display. This input is required and the default icon set is based on Google’s Material Icons naming convention. You can find all available icons and their names in the scrollable preview below.
<!-- Heart icon -->
<bb-icon-ui name="favourite"></bb-icon-ui>
size
The size input sets the size of the icon to one of the predefined sizes.
<!-- Small-sized icon -->
<bb-icon-ui name="favourite" size="sm"></bb-icon-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Prop |
Description |
Default |
|---|---|---|
|
aria-label |
Sets the accessible label for the icon (for screen readers). |
— |