title: Change checkbox icon when checked Vuejs Vuetify
body: <p>So I am trying to check the checkbox Icon to something more custom, perhaps a different icon, however, I tried a couple different things like pseudo elements with no success.  right now what this does is loops through data and displays the name and when checked highlights it based on the css class.  What I am trying to do is when check change the checkbox icon.</p>
  <p>css</p>
  <pre><code>.unchecked{
    color: gray;
  }
  .checked{
    background-color: #ffff00;
  }
  </code></pre>
  <p>Vuejs Component.</p>
  <pre><code>Vue.component('check-list', {
      template: `
              &lt;v-container&gt;
                  &lt;v-row &gt;
                    &lt;v-col &gt;
                        &lt;v-checkbox 
                          v-for=&quot;item in values&quot; 
                          :key=&quot;item.id&quot; 
                          :value=&quot;item.id&quot; 
                           v-model=&quot;selected&quot;
                          &gt;
                         
                            &lt;template v-slot:label&gt;
                                &lt;div :class=&quot;selected.includes(item.id) ? 'checked' : 'unchecked'&quot;&gt;
                                 {{item.name}}
                                &lt;/div&gt;
                            &lt;/template&gt;
                            
                          &lt;/v-checkbox&gt;
                    &lt;/v-col&gt;
                  &lt;/v-row&gt;
                &lt;pre&gt;{{selected}}&lt;/pre&gt;
              &lt;/v-container&gt;  
    `,
    data: function () {
      return {
       selected: [],
       values: [
                  {id:'1',name:'Name 1'},
                  {id:'2', name:'Name 2'},
                  {id:'3', name:'Name 3'},
          ],   
       ex4: ['red']  
      }
    },
    methods: {
      
    },
  })
  
  
  new Vue({
    el: '#components-demo',
    vuetify: new Vuetify({
        icons: {
          iconfont: 'md',
      },
    }),
    data: () =&gt; ({
      
    }),
  })
  </code></pre>