add meeting icon (#41)

packages/mgt-chat/src/components/ChatListItem/ChatListItem.tsx

@@ -347,6 +347,7 @@ export const ChatListItem = ({ chat, myId, isSelected, isRead }: IMgtChatListIte
     // define the JSX for FluentUI Icons + Styling
     const oneOnOneProfilePicture = <ChatListItemIcon chatType="oneOnOne" />;
     const GroupProfilePicture = <ChatListItemIcon chatType="group" />;
+    const meetingProfilePicture = <ChatListItemIcon chatType="meeting" />;
 
     const other = c.members?.find(m => (m as AadUserConversationMember).userId !== myId);
     const otherAad = other as AadUserConversationMember;
@@ -366,6 +367,8 @@ export const ChatListItem = ({ chat, myId, isSelected, isRead }: IMgtChatListIte
         );
       case c.chatType === 'group':
         return GroupProfilePicture;
+      case c.chatType === 'meeting':
+        return meetingProfilePicture;
       default:
         return oneOnOneProfilePicture;
     }

packages/mgt-chat/src/components/ChatListItemIcon/ChatListItemIcon.tsx

@@ -1,17 +1,24 @@
 import React from 'react';
 import { Chat } from '@microsoft/microsoft-graph-types';
-import { PeopleTeam24Regular, Person24Regular, bundleIcon } from '@fluentui/react-icons';
+import { CalendarLtr24Regular, PeopleTeam24Regular, Person24Regular, bundleIcon } from '@fluentui/react-icons';
 import { error } from '@microsoft/mgt-element';
 import { Circle } from '../Circle/Circle';
 
 const GroupIcon = bundleIcon(PeopleTeam24Regular, PeopleTeam24Regular);
 const PersonIcon = bundleIcon(Person24Regular, Person24Regular);
+const MeetingIcon = bundleIcon(CalendarLtr24Regular, CalendarLtr24Regular);
 export const ChatListItemIcon = ({ chatType }: Chat): JSX.Element | null => {
   if (!chatType) return null;
 
   const iconColor = 'var(--colorBrandForeground2)';
 
   switch (chatType) {
+    case 'meeting':
+      return (
+        <Circle>
+          <MeetingIcon color={iconColor} />
+        </Circle>
+      );
     case 'oneOnOne':
       return (
         <Circle>