Vuetify / DataTable: Changing style for 'show-group-by' button?

Question

I want to use the default grouping function in the vuetify datatable.
It works fine, but I want to change the default button style for grouping and replace it with an icon.
Is that possible? If I inspect the button in the dev tools, it just shows <span>group</span>.
Found only this in the docs: https://vuetifyjs.com/en/components/data-tables/#grouped-rows

Edit: By now I know what I would like. I am looking for the default template for the v-slot:header. This is where the button I mentioned above is generated that starts the grouping.

Answer 1

I was able to replace the default sort icon and the group button (which just appears to be a span tag with the text 'group' inside) in the v-data-table headers row by using the hide_default_header prop on the v-data-table and then replacing the hidden headers row by using the header slot. v-data-table docs

<template v-slot:header="props">
    <thead>
        <tr>
            <template v-for="header in props.props.headers">
                <th :key="header.value">
                    <span>{{ header.text }}</span>
                    <v-btn @click.stop="props.on.sort(header.value)" icon><v-icon>keyboard_arrow_down</v-icon></v-btn>
                    <v-btn @click.stop="props.on.group(header.value)" icon><v-icon>flip_to_back</v-icon></v-btn>
                </th>
           </template>
        </tr>
    </thead>
</template>

Answer 2

For someone using the Vuetify 2 here is the code that worked for me

<template v-slot:header="{ props: { headers }, on } ">
  <tr>
    <th v-for="header in headers" :class="header.class" :width="header.width" >
        {{header.text}}
        <v-icon @click="on.group(header.value)"> {{ header.icon }} </v-icon>
    </th>
  </tr>
</template>