How to change button icon from solid to regular fill in Jitterbit App Builder
By default, if you are using the Icon images native to what is shipped with App Builder, these are set to the Solid Icon state (meaning the icon appears with a solid background color). If you would like, you can configure Theme information to override this state and use the Regular Icon state so that the icon appears as an outline of the shape without a fill.
In this article we take a look at how to modify a Button Control with an Icon to have a Regular fill vs. Solid.
SolID address-card icon (default):
Regular address-card icon:
How to modify a button control icon to use a regular icon state
If you would like to use the Regular Icon state, here is how to configure the corresponding Theme information:
- Navigate to the area of your application where you want to include the icon and add it as you typically would. For example: Address-card Icon selected for Test Button
- Go to Action Drawer > Live Designer
- Select the Control with the Icon you want to modify
- Click More and select Styles
- Click + Style
- Select Font from the Style Categories panel
- Locate Font Weight 400 from the Style panel and click + Add
- Click x to exit out of the Style screen
- Click the Open record icon for the Style just created
- Click the Edit Style button
- Select Controls from the Components panel
- Click Create under Styles
- Select Icon from Button as the Area
- Select Font as Style Type
- Set Font Weight to normal
- Click Save
- Exit out of Style Settings and return to Application UI Layer, refresh and confirm icon now appears as expected.