Стилизация значка, определенного с помощью prepend-icon в Vuetify

Question

Обычно, чтобы стилизовать иконку в Vuetify, мы будем делать что-то вроде

<v-icon large color="primary">comment</v-icon> 

Как получить тот же эффект при использовании реквизита prepend-icon как здесь

<v-list-group prepend-icon="comment">

В документации сказано, что prepend-icon использует тот же синтаксис, что и v-icon, но для моего варианта использования не приведен конкретный пример

Answer 1

Использование v-icon внутри слота prependIcon шаблона v-list-group (вместо prepend-icon prop) даст вам всю необходимую гибкость:

<v-list-group>
  <v-icon slot="prependIcon" large color="primary">comment</v-icon>
</v-list-group>

Answer 2

Нацельтесь на него правильно и примените стиль.
Например, в 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, потому что он не всегда один и тот же.
(если вы используете стили с областью видимости, то, возможно, нет необходимости добавлять свои собственные дополнительные селекторы для нацеливания на определенные значки).

Пример codepen

Примечание. Мне не известны какие-либо собственные классы или реквизиты vuetify для стилизации значков prepend / append.Поэтому, если они существуют или будут внедрены в будущем, используйте их.