crystal svg

frontend/src/components/Card.vue

@@ -2,10 +2,29 @@
   <v-list-tile avatar>
     <v-tooltip @input="booted = true" bottom>
       <template v-slot:activator="{ on }">
-        <v-list-tile-avatar :color="color" v-on="on">
-          <span class="headline font-weight-bold white--text">
-            {{ dbentry.cost }}
-          </span>
+        <v-list-tile-avatar v-on="on">
+          <svg
+            x="0px"
+            y="0px"
+            width="16px"
+            height="30px"
+            viewBox="0 0 16 30"
+            style="enable-background:new 0 0 16 30;"
+            xml:space="preserve"
+          >
+            <polygon points="0,5 8,0 16,5 16,25 8,30 0,25" :fill="color" />
+            <text
+              x="2.5"
+              y="22"
+              font-size="20"
+              font-family="sans-serif"
+              fill="white"
+              font-weight="bold"
+              class="ng-binding"
+            >
+              {{ dbentry.cost }}
+            </text>
+          </svg>
         </v-list-tile-avatar>
       </template>
       <v-img