fix: expand accepted icon prop types

[J-Sek]

Description

• followup to a4ef229
• does not cover labs components (VTreeView, VCalendar) to avoid merge conflicts

fixes #19858

Markup:

<template>
  <div style="zoom: 1.2">
    <v-card class="mx-auto my-3" width="300">
      <v-list :expand-icon="expandIcon" :collapse-icon="collapseIcon">
        <v-list-group value="Animals">
          <template #activator="{ props: on }">
            <v-list-item v-bind="on" title="Animals" />
          </template>
          <v-list-item v-for="(t, i) in ['Ant', 'Boar']" :title="t" :key="i" />
        </v-list-group>
      </v-list>
    </v-card>
    <v-card class="mx-auto my-3" width="600">
      <v-stepper :complete-icon="checkIcon" :edit-icon="editIcon" :error-icon="bugIcon">
        <v-stepper-header>
          <v-stepper-item title="Problem" value="0" error />
          <v-divider />
          <v-stepper-item title="Step 1" value="1" complete :complete-icon="checkIcon" color="success" />
          <v-divider />
          <v-stepper-item title="Click me" value="2" editable :edit-icon="editIcon" />
          <v-divider />
          <v-stepper-item title="Step 3" value="3" :icon="flagIcon" />
        </v-stepper-header>
      </v-stepper>
    </v-card>
    <v-card class="mx-auto my-3" width="400">
      <v-chip-group filter>
        <v-chip v-for="i in 4" :filter-icon="flagIcon">Option {{ i }}</v-chip>
      </v-chip-group>
    </v-card>
    <v-card class="mx-auto my-3" width="330">
      <v-date-picker>
        <template #header>
          <v-date-picker-header
            color="primary"
            :append-icon="bugIcon"
            header="My header"
          />
        </template>
      </v-date-picker>
    </v-card>
  </div>
</template>

<script setup lang="ts">
import { ref, defineComponent, h } from 'vue'

function fromSvgPath(path: string) {
  return defineComponent({
    render() {
      return h(
        'svg',
        { viewBox: '0 0 24 24', fill: 'none', strokeWidth: '1.5', stroke: 'currentColor' },
        [h('path', { d: path }),]
      )
    },
  })
}

const expandIcon = fromSvgPath('m15 15-6 6m0 0-6-6m6 6V9a6 6 0 0 1 12 0v3')
const collapseIcon = fromSvgPath('m9 9 6-6m0 0 6 6m-6-6v12a6 6 0 0 1-12 0v-3')
const bugIcon = fromSvgPath('M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082')
const flagIcon = fromSvgPath('M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5')
const checkIcon = fromSvgPath('M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z')
const editIcon = fromSvgPath('m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125')
</script>