Skip to main content

Icon Widget

Overview​

The Icon widget is a visual component that displays scalable vector icons on your interface. It supports a wide variety of icon libraries and provides flexible styling options including color customization, size adjustment, and alignment controls.

Icon Widget

Widget Properties​

Basic Configuration​

PropertyTypeDescriptionDefault
NameStringDisplay name for the widget-
Variable/ModelStringVariable name to bind the widget to your data model-

Icon Configuration​

PropertyTypeDescriptionOptions
IconStringIcon class name from supported icon librariesFont Awesome, Material Icons, etc.
ColorColorIcon color using color pickerAny valid CSS color
Size (px)NumberIcon size in pixelsAny positive number
AlignmentStringHorizontal alignment of the iconleft, center, right
Icon Basic Configuration

Usage Examples​

Basic Icon Display​

Icon Basic Examples

Status Indicator​

Icon Status Indicator
Icon Navigation

Validation and Visibility​

Screen-Based Validation​

Configure visibility and availability across different screens:

Validation RuleDescription
AvailableWhether the widget is available on the screen
VisibleControls widget visibility (can use conditions)
RequiredNot applicable for icon widgets
DisableNot applicable for icon widgets
Icon Screen Validation

Advanced Conditions​

Use JavaScript expressions for dynamic visibility:

Icon Advanced Conditions

Styling Options​

Custom Classes​

  • Add custom CSS classes through the Class field
  • Use dynamic classes for conditional styling based on data

Responsive Design​

  • Icons scale appropriately across different screen sizes
  • Use relative units in custom CSS for better responsiveness

Color Schemes​

  • Support for theme-based color schemes
  • Can be integrated with global color variables
Icon Styling

Best Practices​

Performance​

  1. Icon Selection: Choose appropriate icon sizes to maintain performance
  2. Color Usage: Use CSS variables for consistent theming
  3. Caching: Icon fonts are cached by browsers for better performance

Accessibility​

  1. Alt Text: While icons don't have alt text, ensure surrounding context is clear
  2. Color Contrast: Maintain sufficient contrast ratios for visibility
  3. Size Guidelines: Use minimum 16px for important interactive icons

Design Consistency​

  1. Icon Family: Use icons from the same library for consistency
  2. Size Standards: Establish size guidelines (e.g., 16px, 20px, 24px)
  3. Color Palette: Limit color variations to maintain visual hierarchy

Responsive Considerations​

  1. Scalability: Test icons at different sizes and resolutions
  2. Touch Targets: Ensure adequate spacing for mobile interfaces
  3. Loading States: Consider placeholder or loading states for dynamic icons

Troubleshooting​

Common Issues​

  1. Icon Not Displaying:

    • Verify icon class name is correct
    • Check if icon library is loaded
    • Ensure icon font files are accessible

  2. Size Not Applying:

    • Check for CSS conflicts
    • Verify font-size property inheritance
    • Use browser developer tools to inspect styles

  3. Color Not Changing:

    • Ensure color property is properly formatted
    • Check for CSS specificity issues
    • Verify color value is valid

  4. Alignment Issues:

    • Review container styles
    • Check for conflicting CSS rules
    • Ensure proper text-align inheritance

Debug Tips​

  • Use browser developer tools to inspect icon elements
  • Verify CSS class application
  • Check console for any font loading errors
  • Test with simple, known-working icon classes first