通常、Vuetifyでアイコンのスタイルを設定するには、次のようにします
<v-icon large color="primary">comment</v-icon>
ここのようなprepend-icon
プロップを使用しているときに同じ効果を得るには
<v-list-group prepend-icon="comment">
ドキュメントには、prepend-icon
がv-icon
と同じ構文を使用していると書かれていますが、私のユースケースについて具体的な例は提供されていません
適切にターゲットを設定し、スタイルを適用します。
たとえばv-list-group
の場合:
.v-list__group__header__prepend-icon .v-icon {
color: red;
}
しかし、たとえばv-text-field
追加アイコンに注意してください
.v-input__icon--append .v-icon {
color: purple;
}
注:動作せず、スコープ付きスタイルを使用している場合は、 解決方法 を参照してください。
only.v-icon
を使用しないように注意してください。たとえば、追加アイコンもオーバーライドできますが、これは必要なものではない可能性があります。
また、!important
は良い習慣ではないため、ここで使用する必要はありません。
したがって、コンポーネントに応じて.v-list__group__header__prepend-icon
クラスを回転するか、独自のクラスを追加することもできます。要素を検査し、常に同じではないため、追加/追加アイコンのクラスを確認します。
(スコープスタイルを使用している場合、特定のアイコンをターゲットにするために独自のセレクターを追加する必要はおそらくありません)。
注:prepend/appendアイコンをスタイリングするためのvuetify独自のクラスや小道具は知りません。これらが存在するか、将来実装される場合は、それらを使用してください。
(v-icon
propの代わりに)v-list-group
テンプレートのprependIcon
スロット内でprepend-icon
を使用すると、必要な柔軟性がすべて得られます。
<v-list-group>
<v-icon slot="prependIcon" large color="primary">comment</v-icon>
</v-list-group>
これは少し遅いかもしれませんが、v-icon
タグを使用して「フォント」(つまりマテリアルアイコン)にカラースタイリングを適用する適切な方法は、Vuetifyのクラスシステムを使用することです。
text--{lighten|darken}-{n}
https://vuetifyjs.com/en/styles/colors#classes
<v-icon class="primary--text">comment</v-icon>
<v-icon class="red--text">comment</v-icon>
<v-icon class="green--text lighten-3">comment</v-icon>
Vuetifyコンストラクターでprimary, secondary, {custom}...
テーマカラーを定義できます。