chore(v5): update priority icons (#13905)

# Pull Request Template

## Description

This PR updates the priority icons with a new set and makes them
consistent across the app.


## How Has This Been Tested?

**Screenshots**
<img width="420" height="550" alt="image"
src="https://github.com/user-attachments/assets/cb392934-6c4d-46b4-9fde-244461da62ef"
/>
<img width="358" height="340" alt="image"
src="https://github.com/user-attachments/assets/cb18df47-9a17-42f8-9367-e8b7c4e3958d"
/>
<img width="344" height="468" alt="image"
src="https://github.com/user-attachments/assets/9de92374-e732-48eb-a8a9-85c5b5100931"
/>
<img width="445" height="548" alt="image"
src="https://github.com/user-attachments/assets/ecc4ce51-165c-4593-a9a2-e70b08a29006"
/>


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranav@chatwoot.com>

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -5,6 +5,7 @@ import { useToggle } from '@vueuse/core';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
 
 const props = defineProps({
@@ -53,6 +54,10 @@ const hasValue = computed(() => {
   }
   return false;
 });
+
+const hasIcon = computed(() => {
+  return props.selectedItem?.icon || false;
+});
 </script>
 
 <template>
@@ -83,7 +88,7 @@ const hasValue = computed(() => {
           </h4>
         </div>
         <Avatar
-          v-if="hasValue && hasThumbnail"
+          v-if="hasValue && hasThumbnail && !hasIcon"
           :src="selectedItem.thumbnail"
           :status="selectedItem.availability_status"
           :name="selectedItem.name"
@@ -91,6 +96,11 @@ const hasValue = computed(() => {
           hide-offline-status
           rounded-full
         />
+        <Icon
+          v-if="hasValue && hasIcon"
+          :icon="selectedItem.icon"
+          class="size-5 text-n-slate-11"
+        />
       </Button>
       <div
         :class="{

app/javascript/shared/components/ui/MultiselectDropdownItems.vue

@@ -2,6 +2,7 @@
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
@@ -9,6 +10,7 @@ export default {
     WootDropdownItem,
     WootDropdownMenu,
     Avatar,
+    Icon,
     NextButton,
   },
 
@@ -106,7 +108,7 @@ export default {
                 </span>
               </div>
               <Avatar
-                v-if="hasThumbnail"
+                v-if="hasThumbnail && !option.icon"
                 :src="option.thumbnail"
                 :name="option.name"
                 :status="option.availability_status"
@@ -114,6 +116,11 @@ export default {
                 hide-offline-status
                 rounded-full
               />
+              <Icon
+                v-if="option.icon"
+                :icon="option.icon"
+                class="size-5 text-n-slate-11"
+              />
             </NextButton>
           </WootDropdownItem>
         </WootDropdownMenu>