PrimeVue Datatable change paginator icons

Question

I have a PrimeVue datatable in my Vue 3 composition API app. I am using unstyled mode and the Lara preset.

I have set paginator to true and it works fine. However, I want to use different icons for the pagination buttons.

Unlike older versions of Prime, the icons are now SVG code directly inside button elements.

In many instances I have been able to use a template, such as template #sorticon to replace icons, but I can't figure out how to replace the paging buttons.

  <DataTable
    v-model:filters="filters"
    :value="users"
    removableSort
    tableStyle="min-width: 65rem"
    tableClass="tableHover"
    stripedRows
    paginator
    :rows="10"
    size="small"
    :rowsPerPageOptions="[5, 10, 20]"
    :filters="filters"
    dataKey="id"
    :loading="loading"
    :global-filter-fields="['username', 'first_name', 'last_name', 'email', 'role']"
    paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink JumpToPageDropdown NextPageLink LastPageLink"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
  >
    <template #empty> No users found. </template>
    <template #loading> Loading users data. Please wait. </template>

    <Column field="username" sortable header="Username">
      <template #sorticon="{ sortOrder }">
        <SortIcon
          :name="sortOrder === 1 ? 'sort-asc' : sortOrder === -1 ? 'sort-desc' : 'sort-unsorted'"
        /> </template
    ></Column>

  ... other columns ...
  </DataTable>

Answer 1

The Primevue DataTable API specifies the following slots, which you can use to customize the icons of the Paginator buttons:

    <DataTable paginator>
      <template #paginatorfirstpagelinkicon>First</template>
      <template #paginatornextpagelinkicon>Next</template>
      <template #paginatorprevpagelinkicon>Prev</template>
      <template #paginatorlastpagelinkicon>Last</template>
    </DataTable>