Icon

The Icon widget is used to show a small image or a symbol.

Add an Icon to Your Project

To add an Icon to your project:

Simply drag the Icon widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.

The default Icon widget shows the settings icon.

Here's an example of how you can use an Icon widget with custom items:

  1. First, drag the Column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.

  2. Move to the Property Editor (on the right side of your screen) and scroll down to the Column Properties section. Set the Cross Axis Alignment to Start and the Padding property to 10.

  3. Add a Text widget. Change the name to Title and the Theme Style to Title 1.

  4. Add another Text widget. Change the name to Description.

  5. Now, add one Row widget from the Layout Elements tab.

  6. Finally, add the Icon widget either by dragging it from the Base Elements tab (in the Widget Panel) or directly from the widget tree.

  7. Move to the Property Editor (on the right side of your screen) and scroll down to the Icon section.

  8. Click on the Settings Outlined button then search and select the icon named time.

  9. Add one more Text widget and change the name to Time.

Customizing the Icon

Here are the instructions on customizing the Icon.

Changing the Properties

The Properties Panel can be used to customize the appearance and behavior of your widget.

Add Padding

Here are the instructions on how to add padding.

Adjust the Alignment

Here are the instructions on adjusting the alignment.

Show/Hide Icon

Please find the instructions to show/hide the widget here

Last updated