Remove or change the calendar icon from angular material datepicker

Question

I was using angular material. I find it very cool, well designed and user friendly. I was trying to change or remove the calendar icon on datepicker directive.

<md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>

The default icon is very good but i want to skip the icon in some case. well i can use svg icon using md-icon like this

 <md-icon md-svg-src="calendar.svg"></md-icon>

Here is my sample plunker. Suggest me some idea to change/remove the default icon on datepicker.

Answer 1

Angular Material 1.1.0 has a solution, although it seems undocumented.

From angular-material/modules/js/datepicker/datepicker.js:

* @param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that this may cause the
* datepicker to not align properly with other components. **Use at your own risk.** Possible values are:
* * `"all"` - Hides all icons.
* * `"calendar"` - Only hides the calendar icon.
* * `"triangle"` - Only hides the triangle icon.

Usage:

<md-datepicker ng-model="myModel" md-hide-icons="calendar"></md-datepicker>

Answer 2

The original question was how to "to change or remove the calendar icon on datepicker directive."?

I just know how to remove it.

You can remove the calendar icon by simply putting the following in a CSS file and adding it to your page:

.md-datepicker-button {
    display: none !important;   
}

.md-datepicker-input-container {
    margin-left: 0 !important;    
}