vue.jsvuejs3vuetify.jsvuetifyjs3

How to change Icon Color in <v-pagination> componenet?

I'm working on a project using Vuetify 3 and I'm trying to customize the appearance of the <v-pagination> component. Specifically, I want to change the color of the icons used for previous and next buttons.

  <v-pagination
    v-model="currentPage"
    :length="100"
    :total-visible="total"
    >  
  </v-pagination>
Solution

  • You can use the :color prop:

    <v-pagination
  color="secondary"
  ...

    but this will change color of all elements.

    If you want to change color of individual elements, you have to use CSS:

      .v-pagination__first,
  .v-pagination__prev,
  .v-pagination__item,
  .v-pagination__item--is-active,
  .v-pagination__next,
  .v-pagination__last{
    color: rgb(var(--v-theme-primary));
  }