Edit the View

1.     In the IDE, switch to the Web Page created in the previous tutorial in step Generate the Application.

 

2.     Open the Contacts view for editing by clicking the Open icon in the view.

 

The view is opened in the editor.

3.     Click on the image on the first row of the list:

 

The properties of the list image are now shown in the Details tab on the left:

 

4.     Locate the Icon property and click on the small button with three dots:

 

The Icon Picker dialog is displayed:

 

5.     Search for Material Design icons with 'person'.

6.     Select the image you want to use as the list image by double-clicking:

 

The icon you have chosen is now set:

 

7.     Compile the Contacts view:

 

8.     In the Compile tab on the bottom of the IDE, verify that the compilation was successful:

 

9.     Close the Contacts view.