Hi Dhivakar,

there is a widget that allows you to choose the icon:

If it still doesn't fit your purpose you can copy the widget from OutSystemsUI and customize it.

Regards

https://stackoverflow.com/a/45128029/5797063

You need to use this to change the icon. Put this CSS on your theme and you will see it changing.

With the input icon widget unfortunately is not possible because the inputs of data type time will have always the icon just if you change the data type but then you will lose the features of a data type time input.

This is the class you need

input[type="time"]::-webkit-calendar-picker-indicator

input[type="time"]::-webkit-calendar-picker-indicator {

     background: url(https://mywildalberta.ca/images/GFX-MWA-Parks-Reservations.png) no-repeat;

}

One thing that I would do is. Use the input with icon widget and remove the icon from the input of type time like this

input[type="time"]::-webkit-calendar-picker-indicator {

     display none;

}

That way you can manage and change the icon you want :)

Now you have two options. One where you can put any icon you want using a link or from the fontawesome icons and another where you can use the icon widget and choose an icon from the ones that are available.

Kind Regards,

Márcio