Can we use v-icons for edge labels?

[K20shores]

Something like this would be nice

        <v-network-graph
          ref="graph"
          :nodes="nodes"
          :edges="edges"
          :configs="configs"
        >
          <template #edge-label="{ edge, ...slotProps }">
            <v-edge-label
              align="center"
              vertical-align="above"
              v-bind="slotProps"
            >
              <v-icon left>mdi-link</v-icon>
              {{ edge.amount }}
            </v-edge-label>
          </template>
        </v-network-graph>

I know there is an example which loads the material ui fonts. However, that seems wasteful since most vue applications already have material ui fonts installed.

Is this possible easily?

[K20shores]

Ah, the answer is yes. You can use mdi-js and import the svg of the icon directly. That you can directly render onto the graph with something like this

...
          <template #edge-label="{ edge, ...slotProps }">
            <v-edge-label
              :text="`${edge.amount}`"
              align="center"
              vertical-align="above"
              v-bind="slotProps"
            />
          </template>
          <template #edge-overlay="{ edge, scale, length, pointAtLength }">
            <g
              class="edge-icon"
              :transform="`translate(${pointAtLength(0).x}, ${
                pointAtLength(length / 2).y
              })`"
            >
              <foreignObject
                :width="24 * scale"
                :height="24 * scale"
                x="-12"
                y="-12"
              >
                <svg
                  :width="24 * scale"
                  :height="24 * scale"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path :d="mdiLightningBolt" fill="blue" />
                </svg>
              </foreignObject>
            </g>
          </template>
        </v-network-graph>
...

<script setup>
...
import { mdiLightningBolt } from "@mdi/js";

...
</script>