The Icon widget is used to show a small image or a symbol.
You can use the Icon widget to let users quickly understand the meaning of the text. For example, placing a location icon (
) before the numbers such as 23.35, 79.57 helps users identify that the values are a latitude and longitude.
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:
- 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.
- Add one Image widget inside the Column. Move to Property Editor, scroll down to the Image section, and set the Width to inf (Click onicon) and Height to 200.
- Add a Text widget. Change the name to Title and the Theme Style to Title 1.
- Add another Text widget. Change the name to Description.
- Now, add one Row widget from the Layout Elements tab.
- Finally, add the Icon widget either by dragging it from the Base Elements tab (in the Widget Panel) or directly from the widget tree.
- Move to the Property Editor (on the right side of your screen) and scroll down to the Icon section.
- Click on the Settings Outlined button then search and select the icon named time.
- Add one more Text widget and change the name to Time.