Skip to Content

How to change button icon from solid to regular fill

By default, if you are using the Icon images native to what is shipped with Vinyl, 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):

SolID address card

Regular address-card icon:

Regular address card

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:

  1. 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
  2. Go to Action Drawer > Live Designer
  3. Select the Control with the Icon you want to modify
  4. Click More and select Styles
  5. Click + Style
  6. Select Font from the Style Categories panel
  7. Locate Font Weight 400 from the Style panel and click + Add
  8. Click x to exit out of the Style screen
  9. Click the Open record icon for the Style just created
  10. Click the Edit Style button
  11. Select Controls from the Components panel
  12. Click Create under Styles
  13. Select Icon from Button as the Area
  14. Select Font as Style Type
  15. Set Font Weight to normal
  16. Click Save
  17. Exit out of Style Settings and return to Application UI Layer, refresh and confirm icon now appears as expected.