0
# Content Icons
1

2
Icons for content management, file operations, document handling, and media content.
3

4
## Capabilities
5

6
### File Operations
7

8
Icons for basic file operations like copying, saving, and sharing.
9

10
```typescript { .api }
11
// File actions
12
import FileCopy from "@material-ui/icons/FileCopy";
13
import FileCopyOutlined from "@material-ui/icons/FileCopyOutlined";
14
import Save from "@material-ui/icons/Save";
15
import SaveOutlined from "@material-ui/icons/SaveOutlined";
16
import SaveAlt from "@material-ui/icons/SaveAlt";
17
import Share from "@material-ui/icons/Share";
18
import ShareOutlined from "@material-ui/icons/ShareOutlined";
19

20
// Upload and Download
21
import GetApp from "@material-ui/icons/GetApp"; // Download alternative
22
import Publish from "@material-ui/icons/Publish"; // Upload alternative
23
import CloudDownload from "@material-ui/icons/CloudDownload";
24
import CloudUpload from "@material-ui/icons/CloudUpload";
25
```
26

27
### Folders and Organization
28

29
Icons for folder management and content organization.
30

31
```typescript { .api }
32
// Folder management
33
import Folder from "@material-ui/icons/Folder";
34
import FolderOutlined from "@material-ui/icons/FolderOutlined";
35
import FolderOpen from "@material-ui/icons/FolderOpen";
36
import FolderOpenOutlined from "@material-ui/icons/FolderOpenOutlined";
37
import CreateNewFolder from "@material-ui/icons/CreateNewFolder";
38
import CreateNewFolderOutlined from "@material-ui/icons/CreateNewFolderOutlined";
39
import FolderShared from "@material-ui/icons/FolderShared";
40
import FolderSpecial from "@material-ui/icons/FolderSpecial";
41

42
// Organization
43
import Archive from "@material-ui/icons/Archive";
44
import ArchiveOutlined from "@material-ui/icons/ArchiveOutlined";
45
import Unarchive from "@material-ui/icons/Unarchive";
46
import UnarchiveOutlined from "@material-ui/icons/UnarchiveOutlined";
47
```
48

49
### Document Types
50

51
Icons representing different document and file types.
52

53
```typescript { .api }
54
// Document icons
55
import Description from "@material-ui/icons/Description";
56
import DescriptionOutlined from "@material-ui/icons/DescriptionOutlined";
57
import Assignment from "@material-ui/icons/Assignment";
58
import AssignmentOutlined from "@material-ui/icons/AssignmentOutlined";
59
import InsertDriveFile from "@material-ui/icons/InsertDriveFile";
60
import InsertDriveFileOutlined from "@material-ui/icons/InsertDriveFileOutlined";
61

62
// Specific file types
63
import PictureAsPdf from "@material-ui/icons/PictureAsPdf";
64
import PictureAsPdfOutlined from "@material-ui/icons/PictureAsPdfOutlined";
65
```
66

67
### Text Editing
68

69
Icons for text formatting and editing operations.
70

71
```typescript { .api }
72
// Text formatting
73
import FormatBold from "@material-ui/icons/FormatBold";
74
import FormatItalic from "@material-ui/icons/FormatItalic";
75
import FormatUnderlined from "@material-ui/icons/FormatUnderlined";
76
import FormatSize from "@material-ui/icons/FormatSize";
77
import FormatColorText from "@material-ui/icons/FormatColorText";
78
import FormatColorFill from "@material-ui/icons/FormatColorFill";
79
import FormatColorReset from "@material-ui/icons/FormatColorReset";
80

81
// Alignment and lists
82
import FormatAlignLeft from "@material-ui/icons/FormatAlignLeft";
83
import FormatAlignCenter from "@material-ui/icons/FormatAlignCenter";
84
import FormatAlignRight from "@material-ui/icons/FormatAlignRight";
85
import FormatAlignJustify from "@material-ui/icons/FormatAlignJustify";
86
import FormatListBulleted from "@material-ui/icons/FormatListBulleted";
87
import FormatListNumbered from "@material-ui/icons/FormatListNumbered";
88
import FormatIndentDecrease from "@material-ui/icons/FormatIndentDecrease";
89
import FormatIndentIncrease from "@material-ui/icons/FormatIndentIncrease";
90
```
91

92
### Clipboard Operations
93

94
Icons for copy operations and document handling.
95

96
```typescript { .api }
97
// File copy and clipboard operations
98
import FileCopy from "@material-ui/icons/FileCopy";
99
import FileCopyOutlined from "@material-ui/icons/FileCopyOutlined";
100
import Assignment from "@material-ui/icons/Assignment";
101
import AssignmentOutlined from "@material-ui/icons/AssignmentOutlined";
102
```
103

104
### Media Content
105

106
Icons for images, audio, video, and multimedia content.
107

108
```typescript { .api }
109
// Image and photo icons
110
import Image from "@material-ui/icons/Image";
111
import ImageOutlined from "@material-ui/icons/ImageOutlined";
112
import Photo from "@material-ui/icons/Photo";
113
import PhotoOutlined from "@material-ui/icons/PhotoOutlined";
114
import PhotoLibrary from "@material-ui/icons/PhotoLibrary";
115
import PhotoLibraryOutlined from "@material-ui/icons/PhotoLibraryOutlined";
116
import Collections from "@material-ui/icons/Collections";
117
import CollectionsOutlined from "@material-ui/icons/CollectionsOutlined";
118

119
// Audio and video
120
import AudioFile from "@material-ui/icons/AudioFile";
121
import AudioFileOutlined from "@material-ui/icons/AudioFileOutlined";
122
import VideoFile from "@material-ui/icons/VideoFile";
123
import VideoFileOutlined from "@material-ui/icons/VideoFileOutlined";
124
import Movie from "@material-ui/icons/Movie";
125
import MovieOutlined from "@material-ui/icons/MovieOutlined";
126
```
127

128
**Usage Examples:**
129

130
```typescript
131
import React from 'react';
132
import { 
133
  Save, 
134
  Share, 
135
  Download, 
136
  Upload,
137
  Folder,
138
  FileCopy,
139
  FormatBold,
140
  FormatItalic,
141
  Image,
142
  Description
143
} from '@material-ui/icons';
144
import { IconButton, Toolbar } from '@material-ui/core';
145

146
// File operations toolbar
147
function FileToolbar({ onSave, onShare, onDownload }) {
148
  return (
149
    <Toolbar>
150
      <IconButton onClick={onSave} title="Save">
151
        <Save />
152
      </IconButton>
153
      <IconButton onClick={onShare} title="Share">
154
        <Share />
155
      </IconButton>
156
      <IconButton onClick={onDownload} title="Download">
157
        <Download />
158
      </IconButton>
159
    </Toolbar>
160
  );
161
}
162

163
// Text formatting toolbar
164
function TextFormatToolbar({ onBold, onItalic, onCopy }) {
165
  return (
166
    <Toolbar>
167
      <IconButton onClick={onBold} title="Bold">
168
        <FormatBold />
169
      </IconButton>
170
      <IconButton onClick={onItalic} title="Italic">
171
        <FormatItalic />
172
      </IconButton>
173
      <IconButton onClick={onCopy} title="Copy">
174
        <FileCopy />
175
      </IconButton>
176
    </Toolbar>
177
  );
178
}
179

180
// File browser item
181
function FileItem({ file }) {
182
  const getFileIcon = (type) => {
183
    switch (type) {
184
      case 'folder':
185
        return <Folder />;
186
      case 'image':
187
        return <Image />;
188
      case 'document':
189
        return <Description />;
190
      default:
191
        return <InsertDriveFile />;
192
    }
193
  };
194

195
  return (
196
    <div style={{ display: 'flex', alignItems: 'center' }}>
197
      {getFileIcon(file.type)}
198
      <span style={{ marginLeft: 8 }}>{file.name}</span>
199
    </div>
200
  );
201
}
202

203
// Upload zone
204
function UploadZone({ onUpload }) {
205
  return (
206
    <div 
207
      style={{ 
208
        border: '2px dashed #ccc', 
209
        padding: 20, 
210
        textAlign: 'center',
211
        cursor: 'pointer'
212
      }}
213
      onClick={onUpload}
214
    >
215
      <Upload fontSize="large" />
216
      <p>Click to upload files</p>
217
    </div>
218
  );
219
}
220

221
// Document actions
222
function DocumentActions({ onSave, onDownload, onShare, onCopy }) {
223
  return (
224
    <div>
225
      <IconButton onClick={onSave}>
226
        <Save color="primary" />
227
      </IconButton>
228
      <IconButton onClick={onDownload}>
229
        <Download />
230
      </IconButton>
231
      <IconButton onClick={onShare}>
232
        <Share />
233
      </IconButton>
234
      <IconButton onClick={onCopy}>
235
        <FileCopy />
236
      </IconButton>
237
    </div>
238
  );
239
}
240
```