Simple HTML date picker is showing not showing calendar icon!

Your html date input is given as below

<input type=date>

#Approach 1: Live Demo Link - Changing calendar icon using font-awesome icon library

input[type="date"]:before { color: transparent; background: none; display: block; font-size: 18px; font-family: 'FontAwesome'; content: '\f073'; /* This is the calendar icon in FontAwesome */ width: 15px; height: 20px; position: absolute; top: 12px; right: 6px; color: #999;}

Output: 

#Approach 2: Live Demo Link - Changing calendar icon using image.

CSS Code:

input[type="date"]::-webkit-calendar-picker-indicator { color: rgba(0, 0, 0, 0); opacity: 1; display: block; background: url(//www.clipartbest.com/cliparts/9cz/67G/9cz67Gxgi.png) no-repeat; width: 20px; height: 20px; border: 1px blue solid; border-width: thin;}

Output:

This way you can overwrite your date picker, Hope it will work for you.