Saltar al contenido

Diseñar un icono definido con prepend-icon en Vuetify

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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *