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 Name | Description |
|---|---|
sun | Light mode indicator |
moon | Dark mode indicator |
search | Search functionality |
check | Confirmation/success |
x | Close/cancel |
plus | Add item |
minus | Remove item |
arrow-left | Navigation |
arrow-right | Navigation |
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
- Tabler Icons - Browse available icons
- BASIS Online Help - Search for "DWC icons"