title: Vuetify - Change default color for v-text-field type=date icon
body: <p>I'm filtering records between two dates, which will show data brought from the backend. Instead of using the conventional way found in Vuetify's <a href="https://vuetifyjs.com/en/components/date-pickers/" rel="nofollow noreferrer">documentation on date pickers</a> like in the following CodePen:</p>
  <p><a href="https://codepen.io/DigitalDevGuy/pen/eYZPPJx" rel="nofollow noreferrer">Vuetify v-text-field Date Picker on CodePen</a></p>
  <p>I'm only using a <code>v-text-field type=&quot;date&quot;</code> to make it simpler as you can see in the following code:</p>
  <p><strong>HTML:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;v-layout align-start&gt;
          &lt;v-flex&gt;
              &lt;v-toolbar flat color=&quot;grey darken-4&quot;&gt;
                  &lt;v-toolbar-title&gt;History&lt;/v-toolbar-title&gt;
                  &lt;v-divider class=&quot;mx-4&quot; inset vertical&gt;&lt;/v-divider&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  From:&amp;nbsp;
                  &lt;v-text-field type=&quot;date&quot; class=&quot;text-xs-center ml-2 mr-4&quot; v-model=&quot;startDate&quot;&gt;&lt;/v-text-field&gt;
                  To:&amp;nbsp;
                  &lt;v-text-field type=&quot;date&quot; class=&quot;text-xs-center ml-2 mr-4&quot; v-model=&quot;endDate&quot;&gt;&lt;/v-text-field&gt;
                  &lt;v-btn @click=&quot;list()&quot; color=&quot;primary&quot; class=&quot;ml-2 mb-2&quot;&gt;Search&lt;/v-btn&gt;
              &lt;/v-toolbar&gt;
            &lt;/v-flex&gt;
      &lt;/v-layout&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>JS:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
      import axios from 'axios'
      export default {
          data(){
              return{
                  startDate:'',
                  endDate:''
              }
          },
  
          created () {
              this.list();
          },
  
          methods:{
              list(){
                  let me=this;
                  let header={&quot;Authorization&quot; : &quot;Bearer &quot; + this.$store.state.token};
                  let configuration= {headers : header};
                  let url='';
                  if(!me.startDate || !me.endDate){
                      url='api/Sales/List';
                  }
                  else{
                      url='api/Sales/SalesHistory/'+me.startDate+'/'+me.endDate;
                  }
                  axios.get(url,configuration).then(function(response){
                      me.sales=response.data;
                  }).catch(function(error){
                      console.log(error);
                  }); 
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>It lets me filter records that took place between both dates selected.</p>
  <p><a href="https://i.stack.imgur.com/thQMf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/thQMf.png" alt="enter image description here" /></a></p>
  <p>The only issue I've stumbled upon is the fact that when switching to Dark theme, the default black calendar icon that looks like an <code>append-icon</code> (which in this case acts as a button) won't switch to white as it does on the example of Vuetify's documentation:</p>
  <p><a href="https://i.stack.imgur.com/3mBye.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3mBye.png" alt="enter image description here" /></a></p>
  <p>I found on GitHub that someone <a href="https://github.com/vuetifyjs/vuetify/issues/5552" rel="nofollow noreferrer">requested</a> for <em>color props for append prepend icons in v-text-field</em> to be added (which sounds really convenient indeed), but the request got labeled as <em>wontfix</em>, and the given answer seemed poor for what he and I were looking for as well.</p>
  <p>If I add an <code>append-icon=&quot;date_range&quot;</code>, it only adds another icon (color correct) beside the default black calendar icon and it stops the date picker itself from working. I also can't add a <code>readonly</code> prop (with the purpose to avoid the user to type in the date, it only fills the text field with numbers when typed, but the year accepts up to 6 characters when it should only be 4) because it also stops the date picker from working too.</p>
  <p>What could I do to switch the color of the calendar icon?</p>