Skip to main content

Icon Pools

This chapter covers working with icon pools in DWC applications.

Overview​

The DWC provides built-in icon pools that allow you to easily add icons to your BBj controls without needing to manage image files.

Using Icons in DWC​

Icons can be added to controls using HTML syntax:

button!.setText("<html><dwc-icon name='sun'></dwc-icon> Light Mode")

Available Icon Pools​

The DWC includes several icon pools:

  • Tabler Icons - A comprehensive set of over 1900 icons
  • Font Awesome - Popular icon library (if configured)

Icon Syntax​

Basic Usage​

<dwc-icon name='icon-name'></dwc-icon>

With Pool Specification​

<dwc-icon pool='tabler' name='icon-name'></dwc-icon>

Common Icons​

Icon NameDescription
sunLight mode indicator
moonDark mode indicator
searchSearch functionality
checkConfirmation/success
xClose/cancel
plusAdd item
minusRemove item
arrow-leftNavigation
arrow-rightNavigation

Styling Icons​

Icons can be styled using CSS:

dwc-icon {
    --dwc-icon-color: var(--dwc-color-primary);
    --dwc-icon-size: 24px;
}

Example - Adding Icons to Buttons​

rem Create a button with an icon
btn! = wnd!.addButton("<html><dwc-icon name='check'></dwc-icon> Save")

rem Create a danger button with icon
deleteBtn! = wnd!.addButton("<html><dwc-icon name='trash'></dwc-icon> Delete")
deleteBtn!.setAttribute("theme", "danger")

Resources​