How can I completely remove the auto-generated spacer in a Vuetify v-list-item with a prepend slot?

I have a limited amount of space available in my list item, but Vuetify injects an unwanted 32px spacer when using the prepend slot. I tried to remove it with scoped CSS, but it still renders. My current implementation is as follows:

HTMLCopied
<template>
        <v-list density="compact">
            <v-list-item density="compact" v-for="date in datesList">
                <template v-slot:prepend>
                    <v-icon :icon="date.icon" :color="date.color"></v-icon>
                </template>

                <v-list-item-title v-text="date.text"></v-list-item-title>
            </v-list-item>
        </v-list>
</template>

I attempted to remove the spacer with the following scoped style:

CSSCopied
.v-list-item__prepend {
    display: inline-block;
}
.v-list-item__spacer {
    width: 0;
}

However, the spacer still appears. How can I completely remove this extra spacing?

Additional context: Using the prepend slot in v-list-item automatically inserts the spacer. One approach mentioned in an answer is to use the deep selector (e.g., ::v-deep) to override the spacer's style from within a scoped block. Another option is to remove the prepend slot altogether and integrate the icon differently if spacing is an issue.