Rebel Rebel - 5 months ago 534
AngularJS Question

Remove or change the calendar icon from angular material datepicker

I was using

. 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

Here is a better solution.

  1. create a button with another icon and place it in the same div with datepicker

    <div flex=40>
         <md-icon md-svg-src="calendar.svg"></md-icon>
         <md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
    </div>
    
  2. set the button postion to cover the orginal datepicker icon

    <div flex=40>
         <md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon>
         <md-datepicker ng-model="myDate" md-placeholder="Enter date" ></md-datepicker>
    </div>
    
  3. set the the original datepicker icon to apparent.

    .md-datepicker md-icon {color: rgba(0,0,0,0) !important;}
    .md-datepicker-open .md-datepicker-calendar-icon {fill:rgba(0,0,0,0)}
    
Comments