You're viewing documentation for Draftbit Classic (v1), our previous
platform. See the current Draftbit docs.
Icon
The Icon component is a visual indicator to show a small image or a symbol. There are hundreds of different open source icons for you to choose from.
You can pick an icon from the available list of icon sets:
| Icon Sets |
|---|
| Ant Design |
| Entypo |
| Evil Icons |
| Feather |
| Font Awesome |
| Foundation |
| Ionicons |
| Material Community Icons |
| Material Icons |
| Octicon |
| Simple Line Icons |
| Zocial |
Style Properties
Section titled “Style Properties”Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.
Component Specific Styles
Section titled “Component Specific Styles”| Property | Description |
|---|---|
| Color | The color of the icon. Defaults to strong. |
| Size | The width and height of the icon. Defaults to 24. |
Configuration Properties
Section titled “Configuration Properties”| Property | Description |
|---|---|
| Component Name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Icon. |
Data Configuration
Section titled “Data Configuration”| Property | Description |
|---|---|
| Icon | The icon is selected from the icon picker. Defaults to photo. |
| Custom Icon | Render an icon using a string of the icon’s identifier. Overrides the ‘icon’ property. Full list of icons here. Ex: ‘Foundation/align-right’, ‘Feather/check’ |
Conditional Display
Section titled “Conditional Display”You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.