title: Conditionally color material icon in VueJS method?
body: <p>I'm building an app with Quasar v0.15.9, Vue v2.5.0 and material icons. I have a Quasar collapsible inside a Quasar list</p>
  
  <pre><code>&lt;q-list class="q-ma-none q-pa-none" v-for="(fiberPhase, index) in salesRepPhases" :key="index"&gt;
      &lt;q-collapsible 
        :label="'Phase ' + fiberPhase.fiber_phase + ' ' + '(' + fiberPhase.fiber_status + ')'" 
        :icon="fiberIcon(fiberPhase.fiber_status)"&gt;
        &lt;PhaseToBlocks :fiberPhase="fiberPhase.fiber_phase" /&gt;
      &lt;/q-collapsible&gt;
    &lt;/q-list&gt;
  </code></pre>
  
  <p>I am passing the <code>fiber_status</code> per list item to a VueJS method that is setting the icon:</p>
  
  <pre><code>methods: {
    fiberIcon: function (status) {
      if (status === 'Live') {
        return 'fiber_manual_record'
  
      if (status === 'Pending') {
        return 'fiber_manual_record'
      }
      return 'fiber_manual_record'
    }
  }
  </code></pre>
  
  <p>I could set to three different icons, but what I would prefer to do is set to the same icon and set the icon color per the three statuses. Anyone see a way that would be possible? The style is set component level and I also have <code>stylus</code> as part of Quasar. The colors I want to set are stylus variables, which can be set inline or in the style tag per usual VueJS standards:</p>
  
  <pre><code>&lt;style lang="stylus" scoped&gt;
  @import '~variables'
  
  .q-item:focus
    background $secondary
  
  .q-list-header 
    text-align center
    background $tertiary
    color white
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Here's an example of the list with non-colored icons:</p>
  
  <p><a href="https://i.stack.imgur.com/99s00.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/99s00.png" alt="enter image description here"></a></p>