vue.js - VueJSメソッドでマテリアルアイコンを条件付きで色付けしますか?

Question

Quasar v0.15.9、Vue v2.5.0、およびマテリアル アイコンを使用してアプリを構築しています。クエーサー リスト内に折りたたみ可能なクエーサーがあります

<q-list class="q-ma-none q-pa-none" v-for="(fiberPhase, index) in salesRepPhases" :key="index">
    <q-collapsible 
      :label="'Phase ' + fiberPhase.fiber_phase + ' ' + '(' + fiberPhase.fiber_status + ')'" 
      :icon="fiberIcon(fiberPhase.fiber_status)">
      <PhaseToBlocks :fiberPhase="fiberPhase.fiber_phase" />
    </q-collapsible>
  </q-list>

fiber_statusアイコンを設定している VueJS メソッドにリスト項目ごとに渡しています。

methods: {
  fiberIcon: function (status) {
    if (status === 'Live') {
      return 'fiber_manual_record'

    if (status === 'Pending') {
      return 'fiber_manual_record'
    }
    return 'fiber_manual_record'
  }
}

3 つの異なるアイコンを設定することもできますが、同じアイコンを設定し、3 つのステータスごとにアイコンの色を設定することをお勧めします。誰でも可能になる方法を見ますか? スタイルはコンポーネント レベルに設定されてstylusおり、Quasar の一部としても使用しています。設定したい色はスタイラス変数で、通常の VueJS 標準に従ってインラインまたはスタイル タグで設定できます。

<style lang="stylus" scoped>
@import '~variables'

.q-item:focus
  background $secondary

.q-list-header 
  text-align center
  background $tertiary
  color white

</style>

以下は、色の付いていないアイコンを含むリストの例です。