As you can see, the default icon for the datetime picker is entirely black and you might want to change it to suit your brand and expectations in some cases.

To change the colour of the Calendar icon for the TextField component with type="date", you need to add the following code to your CSS file:

::-webkit-calendar-picker-indicator {
    filter: invert(1)
            brightness(50%)
            sepia(100%)
            saturate(10000%)
            hue-rotate(180deg)
}

This code applies a filter effect to the Calendar icon, which modifies its colour according to the parameters you specify. You can adjust the values of these parameters to get different colours. For example, if you want a white colour, you can simply use invert(1), which inverts the colours of the icon. You can experiment with different combinations of parameters and values to get the colour you want.

::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(100%) saturate(0) hue-rotate(0deg);
}

Make a slight change to match the current brand color.

::-webkit-calendar-picker-indicator {
    opacity: 0.6;
    filter: invert(1);}