I have kind of same problem

i have some SVG icons and i want to change the icons with default (Ant Vue Design Tree) Icons

can someone help me with that?

this is my code i am using tailwind and typescript and this is a component that will show in app.vue
how to change the default icons?

<template>
  <Toolbar class="mt-16" />
  <a-tree
    class="mt-4 rounded-3xl p-2 w-2/3 text-[#171717] bg-[#D9D9D9]"
    v-model:expandedKeys="expandedKeys"
    v-model:selectedKeys="selectedKeys"
    show-line
    :tree-data="treeData"
  >
    <template #switcherIcon="{ switcherCls }"><down-outlined :class="switcherCls" /></template>
  </a-tree>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Toolbar from './Toolbar.vue'
import { DownOutlined } from '@ant-design/icons-vue'
import type { TreeProps } from 'ant-design-vue'
const expandedKeys = ref<string[]>(['0-0-0'])
const selectedKeys = ref<string[]>([])
const treeData: TreeProps['treeData'] = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
          {
            title: 'leaf',
            key: '0-0-0-2',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [
          {
            title: 'leaf',
            key: '0-0-1-0',
          },
        ],
      },
      {
        title: 'parent 1-2',
        key: '0-0-2',
        children: [
          {
            title: 'leaf',
            key: '0-0-2-0',
          },
          {
            title: 'leaf',
            key: '0-0-2-1',
          },
        ],
      },
    ],
  },
]
</script>