diff --git a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
index 3e5c3e339be..d6ce020f5e2 100644
--- a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
+++ b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
@@ -3,7 +3,7 @@
     class="mx-auto"
     max-width="500"
   >
-    <v-sheet class="pa-4 bg-primary-lighten-2">
+    <v-sheet class="pa-4 bg-primary">
       <v-text-field
         v-model="search"
         clear-icon="mdi-close-circle-outline"
@@ -24,11 +24,10 @@
     <v-card-text>
       <v-treeview
         v-model:opened="open"
-        :filter="filter"
+        :custom-filter="filterFn"
         :items="items"
         :search="search"
         item-value="id"
-        open-all
       >
         <template v-slot:prepend="{ item }">
           <v-icon
@@ -113,90 +112,7 @@
   const open = ref([1, 2])
   const search = ref(null)
   const caseSensitive = ref(false)
-  const filter = computed(() => {
-    return caseSensitive.value ? (item, search, textKey) => item[textKey].indexOf(search) > -1 : undefined
-  })
-</script>
-
-<script>
-  export default {
-    data: () => ({
-      items: [
-        {
-          id: 1,
-          title: 'Vuetify Human Resources',
-          children: [
-            {
-              id: 2,
-              title: 'Core team',
-              children: [
-                {
-                  id: 201,
-                  title: 'John',
-                },
-                {
-                  id: 202,
-                  title: 'Kael',
-                },
-                {
-                  id: 203,
-                  title: 'Nekosaur',
-                },
-                {
-                  id: 204,
-                  title: 'Jacek',
-                },
-                {
-                  id: 205,
-                  title: 'Andrew',
-                },
-              ],
-            },
-            {
-              id: 3,
-              title: 'Administrators',
-              children: [
-                {
-                  id: 301,
-                  title: 'Mike',
-                },
-                {
-                  id: 302,
-                  title: 'Hunt',
-                },
-              ],
-            },
-            {
-              id: 4,
-              title: 'Contributors',
-              children: [
-                {
-                  id: 401,
-                  title: 'Phlow',
-                },
-                {
-                  id: 402,
-                  title: 'Brandon',
-                },
-                {
-                  id: 403,
-                  title: 'Sean',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      open: [1, 2],
-      search: null,
-      caseSensitive: false,
-    }),
-    computed: {
-      filter () {
-        return this.caseSensitive
-          ? (item, search, textKey) => item[textKey].indexOf(search) > -1
-          : undefined
-      },
-    },
+  const filterFn = function (value, search, item) {
+    return caseSensitive.value ? value.indexOf(search) > -1 : value.toLowerCase().indexOf(search.toLowerCase()) > -1
   }
 </script>
diff --git a/packages/docs/src/pages/en/components/treeview.md b/packages/docs/src/pages/en/components/treeview.md
index 5458926add3..28999642d0c 100644
--- a/packages/docs/src/pages/en/components/treeview.md
+++ b/packages/docs/src/pages/en/components/treeview.md
@@ -146,7 +146,7 @@ Using the the **prepend** slot we are able to create an intuitive file explorer.
 
 #### Search and filter
 
-Easily filter your treeview by using the **search** prop. You can easily apply your custom filtering function if you need case-sensitive or fuzzy filtering by setting the **filter** prop. This works similar to the [v-autocomplete](/components/autocompletes) component.
+Easily filter your treeview by using the **search** prop. You can easily apply your custom filtering function if you need case-sensitive or fuzzy filtering by setting the **custom-filter** prop. This works similar to the [v-autocomplete](/components/autocompletes) component.
 
 <ExamplesExample file="v-treeview/misc-search-and-filter" />
 
diff --git a/packages/docs/src/plugins/icons.ts b/packages/docs/src/plugins/icons.ts
index 5f50e64d639..19bb36bf443 100644
--- a/packages/docs/src/plugins/icons.ts
+++ b/packages/docs/src/plugins/icons.ts
@@ -170,6 +170,7 @@ export {
   mdiFlaskEmptyOutline,
   mdiFlaskOutline,
   mdiFolder,
+  mdiFolderNetwork,
   mdiFolderOpen,
   mdiFolderOutline,
   mdiFolderZipOutline,
@@ -206,6 +207,7 @@ export {
   mdiHome,
   mdiHomeCity,
   mdiHomeOutline,
+  mdiHomeVariant,
   mdiHumanMaleBoard,
   mdiHumanMaleFemaleChild,
   mdiIceCream,
diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
index 4cc4baaf06d..568e9233a50 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
@@ -2,8 +2,8 @@
 @use './variables' as *
 
 @include tools.layer('components')
-  .v-treeview-item--filtered
-      display: none
+  .v-treeview-item.v-treeview-item--filtered
+    display: none
 
   .v-treeview
     --indent-padding: 0px
@@ -16,6 +16,3 @@
 
     .v-list-group__items .v-list-item
       padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important
-
-    .v-list-group__items .v-list-item--prepend
-      // padding-inline-start: calc(#{$treeview-item-prepend-padding-inline-start} + var(--indent-padding)) !important