Vuetify data table pagination icons don't appear

I'm using Vuetify for the first time and I have troubles using the data-table component. I've figured most of my issues out but the pagination icons still don't appear. The buttons are here and clickable, but they're just invisible. I've tried what the answer in this old question suggests, without success : Data Table: Pagination Arrows & Row Select Box Not Displayed

Here's my component template :

<template>
  <v-data-table :items="homeCharacters" :headers="headers" class="charactersTable">
    <template v-slot:item="row">
      <tr class="characterRow">
        <td>{{ row.item.name }}</td>
        <td>{{ row.item.height }}</td>
        <td>{{ row.item.gender }}</td>
        <td>
          <v-btn @click="onButtonClick(row.item.id)"> View </v-btn>
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

Here's my main.ts :

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

import { createPinia } from 'pinia'

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
})

const app = createApp(App)

const pinia = createPinia()

app.use(router)

app.use(pinia)

app.use(vuetify)

app.mount('#app')

And the @mdi/font package is installed (version 7.4.47).

What am I doing wrong here ?

Looks like you are missing import of the font CSS file:

// in main.js
import '@mdi/font/css/materialdesignicons.css'

If you want to switch to SVG icons, check the documentation here.