0
# Communication Icons
1

2
Icons for communication features including messaging, calls, email, social interactions, and contact management.
3

4
## Capabilities
5

6
### Email and Messaging
7

8
Icons for email, messaging, and text-based communication.
9

10
```typescript { .api }
11
// Email icons
12
import Email from "@material-ui/icons/Email";
13
import EmailOutlined from "@material-ui/icons/EmailOutlined";
14
import Mail from "@material-ui/icons/Mail";
15
import MailOutline from "@material-ui/icons/MailOutline";
16
import Inbox from "@material-ui/icons/Inbox";
17
import Drafts from "@material-ui/icons/Drafts";
18
import Send from "@material-ui/icons/Send";
19
import SendOutlined from "@material-ui/icons/SendOutlined";
20

21
// Messaging and chat
22
import Message from "@material-ui/icons/Message";
23
import MessageOutlined from "@material-ui/icons/MessageOutlined";
24
import Chat from "@material-ui/icons/Chat";
25
import ChatOutlined from "@material-ui/icons/ChatOutlined";
26
import ChatBubble from "@material-ui/icons/ChatBubble";
27
import ChatBubbleOutline from "@material-ui/icons/ChatBubbleOutline";
28
import Sms from "@material-ui/icons/Sms";
29
import SmsOutlined from "@material-ui/icons/SmsOutlined";
30
```
31

32
### Phone and Video Calls
33

34
Icons for phone calls, video calls, and call management.
35

36
```typescript { .api }
37
// Phone calls
38
import Phone from "@material-ui/icons/Phone";
39
import PhoneOutlined from "@material-ui/icons/PhoneOutlined";
40
import Call from "@material-ui/icons/Call";
41
import CallEnd from "@material-ui/icons/CallEnd";
42
import CallMade from "@material-ui/icons/CallMade";
43
import CallReceived from "@material-ui/icons/CallReceived";
44
import CallMissed from "@material-ui/icons/CallMissed";
45
import CallMissedOutgoing from "@material-ui/icons/CallMissedOutgoing";
46

47
// Video calls
48
import VideoCall from "@material-ui/icons/VideoCall";
49
import VideoCallOutlined from "@material-ui/icons/VideoCallOutlined";
50
import Videocam from "@material-ui/icons/Videocam";
51
import VideocamOff from "@material-ui/icons/VideocamOff";
52
import VideocamOutlined from "@material-ui/icons/VideocamOutlined";
53
```
54

55
### Contact Management
56

57
Icons for contacts, people, and contact-related actions.
58

59
```typescript { .api }
60
// Contact and people icons
61
import ContactPhone from "@material-ui/icons/ContactPhone";
62
import ContactPhoneOutlined from "@material-ui/icons/ContactPhoneOutlined";
63
import ContactMail from "@material-ui/icons/ContactMail";
64
import ContactMailOutlined from "@material-ui/icons/ContactMailOutlined";
65
import Contacts from "@material-ui/icons/Contacts";
66
import ContactsOutlined from "@material-ui/icons/ContactsOutlined";
67
import Person from "@material-ui/icons/Person";
68
import PersonOutlined from "@material-ui/icons/PersonOutlined";
69
import PersonAdd from "@material-ui/icons/PersonAdd";
70
import PersonAddOutlined from "@material-ui/icons/PersonAddOutlined";
71
```
72

73
### Social and Sharing
74

75
Icons for social interactions, sharing, and social media features.
76

77
```typescript { .api }
78
// Social features
79
import Share from "@material-ui/icons/Share";
80
import ShareOutlined from "@material-ui/icons/ShareOutlined";
81
import People from "@material-ui/icons/People";
82
import PeopleOutlined from "@material-ui/icons/PeopleOutlined";
83
import Group from "@material-ui/icons/Group";
84
import GroupOutlined from "@material-ui/icons/GroupOutlined";
85
import GroupAdd from "@material-ui/icons/GroupAdd";
86
import GroupAddOutlined from "@material-ui/icons/GroupAddOutlined";
87

88
// Social engagement
89
import ThumbUp from "@material-ui/icons/ThumbUp";
90
import ThumbUpOutlined from "@material-ui/icons/ThumbUpOutlined";
91
import ThumbDown from "@material-ui/icons/ThumbDown";
92
import ThumbDownOutlined from "@material-ui/icons/ThumbDownOutlined";
93
import Favorite from "@material-ui/icons/Favorite";
94
import FavoriteBorder from "@material-ui/icons/FavoriteBorder";
95
import FavoriteOutlined from "@material-ui/icons/FavoriteOutlined";
96
```
97

98
### Notifications and Alerts
99

100
Icons for communication notifications and alert management.
101

102
```typescript { .api }
103
// Notification icons
104
import Notifications from "@material-ui/icons/Notifications";
105
import NotificationsOutlined from "@material-ui/icons/NotificationsOutlined";
106
import NotificationsActive from "@material-ui/icons/NotificationsActive";
107
import NotificationsOff from "@material-ui/icons/NotificationsOff";
108
import NotificationsPaused from "@material-ui/icons/NotificationsPaused";
109
import NotificationsNone from "@material-ui/icons/NotificationsNone";
110

111
// Alert types
112
import Announcement from "@material-ui/icons/Announcement";
113
import AnnouncementOutlined from "@material-ui/icons/AnnouncementOutlined";
114
import Campaign from "@material-ui/icons/Campaign";
115
import RecordVoiceOver from "@material-ui/icons/RecordVoiceOver";
116
```
117

118
**Usage Examples:**
119

120
```typescript
121
import React, { useState } from 'react';
122
import { 
123
  Email, 
124
  Phone, 
125
  VideoCall, 
126
  Message, 
127
  Send,
128
  Notifications,
129
  Share,
130
  Favorite
131
} from '@material-ui/icons';
132
import { IconButton, Badge } from '@material-ui/core';
133

134
// Communication action buttons
135
function CommunicationActions() {
136
  return (
137
    <div>
138
      <IconButton>
139
        <Phone color="primary" />
140
      </IconButton>
141
      <IconButton>
142
        <VideoCall color="primary" />
143
      </IconButton>
144
      <IconButton>
145
        <Email color="primary" />
146
      </IconButton>
147
      <IconButton>
148
        <Message color="primary" />
149
      </IconButton>
150
    </div>
151
  );
152
}
153

154
// Message composer
155
function MessageComposer({ onSend }) {
156
  return (
157
    <div style={{ display: 'flex', alignItems: 'center' }}>
158
      <input type="text" placeholder="Type a message..." />
159
      <IconButton onClick={onSend}>
160
        <Send color="primary" />
161
      </IconButton>
162
    </div>
163
  );
164
}
165

166
// Notification badge
167
function NotificationBadge({ count }) {
168
  return (
169
    <Badge badgeContent={count} color="error">
170
      <Notifications />
171
    </Badge>
172
  );
173
}
174

175
// Social engagement buttons
176
function SocialActions({ isLiked, onLike, onShare }) {
177
  return (
178
    <div>
179
      <IconButton onClick={onLike}>
180
        <Favorite color={isLiked ? "error" : "inherit"} />
181
      </IconButton>
182
      <IconButton onClick={onShare}>
183
        <Share />
184
      </IconButton>
185
    </div>
186
  );
187
}
188

189
// Contact card
190
function ContactCard({ contact }) {
191
  return (
192
    <div>
193
      <Person />
194
      <span>{contact.name}</span>
195
      <IconButton>
196
        <Phone />
197
      </IconButton>
198
      <IconButton>
199
        <Email />
200
      </IconButton>
201
      <IconButton>
202
        <Message />
203
      </IconButton>
204
    </div>
205
  );
206
}
207
```