Show detail icon indicating if a car has a plate recognized that is not a known plate (#17601)

web/src/utils/iconUtil.tsx

@@ -32,7 +32,7 @@ import {
   GiRaccoonHead,
   GiSailboat,
 } from "react-icons/gi";
-import { LuBox, LuLassoSelect } from "react-icons/lu";
+import { LuBox, LuLassoSelect, LuScanBarcode } from "react-icons/lu";
 import * as LuIcons from "react-icons/lu";
 import { MdRecordVoiceOver } from "react-icons/md";
 import { PiBirdFill } from "react-icons/pi";
@@ -57,6 +57,8 @@ export function isValidIconName(value: string): value is IconName {
 export function getIconForLabel(label: string, className?: string) {
   if (label.endsWith("-verified")) {
     return getVerifiedIcon(label, className);
+  } else if (label.endsWith("-plate")) {
+    return getRecognizedPlateIcon(label, className);
   }
 
   switch (label) {
@@ -153,3 +155,14 @@ function getVerifiedIcon(label: string, className?: string) {
     </div>
   );
 }
+
+function getRecognizedPlateIcon(label: string, className?: string) {
+  const simpleLabel = label.substring(0, label.lastIndexOf("-"));
+
+  return (
+    <div key={label} className="flex items-center">
+      {getIconForLabel(simpleLabel, className)}
+      <LuScanBarcode className="absolute size-2.5 translate-x-[50%] translate-y-3/4" />
+    </div>
+  );
+}