Solución:
Usando un v-icon
dentro de prependIcon
ranura de la v-list-group
plantilla (en lugar de la prepend-icon
prop) le dará toda la flexibilidad que necesita:
<v-list-group>
<v-icon slot="prependIcon" large color="primary">comment</v-icon>
</v-list-group>
También hay un appendIcon
ranura disponible, por cierto. La documentación oficial de Vuetify menciona las ranuras disponibles, pero guarda silencio sobre los detalles.
Apunte correctamente y aplique estilo.
Por ejemplo en v-list-group
:
.v-list__group__header__prepend-icon .v-icon {
color: red;
}
Pero tenga en cuenta por ejemplo v-text-field
añadir icono
.v-input__icon--append .v-icon {
color: purple;
}
NOTA: Si no funciona y está utilizando estilos de ámbito, vea cómo resolverlo.
Cuidado de no usar solamente .v-icon
porque, por ejemplo, también puede anular el icono de anexar, que podría no ser lo que desea.
También, !important
no es una buena práctica y no es necesario que la usemos aquí.
Así que solo rota .v-list__group__header__prepend-icon
class dependiendo del componente o incluso agregue su propia clase. Inspeccione el elemento y vea para qué sirve la clase anteponer / agregar ícono porque no siempre es el mismo.
(si está utilizando estilos de ámbito, quizás no sea necesario agregar sus propios selectores adicionales para apuntar a los iconos específicos).
Ejemplo codepen
Nota: No conozco las clases o accesorios propios de vuetify para diseñar iconos de anteponer / añadir. Entonces, si existen o se implementan en el futuro, utilícelos.