css - すべての mdi アイコンを含む Vuetify 評価コンポーネント ハーフ スター

Question

私は評価コンポーネントを設定していて、「星」などの mdi アイコンを渡すことができるようにしたいと考えています。そのアイコンは、空/半分/完全なアイコンの小道具を設定します。

ケース 1:

ハートのスクリーンショットとcodepanに見られるように、スター mdi アイコンを使用すると、これはうまく機能し ます。

半分の星は正しく表示され、半分の空の部分には空の部分の周りに輪郭があります。

new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        rating: 3.5,
        emptyIcon: 'mdi-star-outline',
        fullIcon: 'mdi-star',
        halfIcon: 'mdi-star-half'
      }),
    })

Caes 2:

ハートのアイコンを使用すると、半分のハートが表示されますが、スクリーンショット Codepenに見られるように空の半分の周りに輪郭がありません

new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        rating: 3.5,
        emptyIcon: 'mdi-heart-outline',
        fullIcon: 'mdi-heart',
        halfIcon: 'mdi-heart-half'
     }),
    })

原因 3:

他の mdi アイコンを使用すると、半分のバージョンがないように見えるため、半分の評価の場合、星はまったく表示されません。コデペン

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    rating: 3.5,
    emptyIcon: 'mdi-check-outline',
      fullIcon: 'mdi-check',
      halfIcon: 'mdi-check-half'
  }),
})

コンポーネントが任意の mdi アイコンを受け取り、ケース 1 のような評価ビューをレンダリングするようにコーディングするにはどうすればよいですか?