0
# Action Icons
1

2
Common action icons for user interactions like adding, deleting, editing, searching, and settings management.
3

4
## Capabilities
5

6
### Core Actions
7

8
Primary action icons for the most common user interactions.
9

10
```typescript { .api }
11
// Add/Create actions
12
import Add from "@material-ui/icons/Add";
13
import AddBox from "@material-ui/icons/AddBox";
14
import AddCircle from "@material-ui/icons/AddCircle";
15
import AddCircleOutline from "@material-ui/icons/AddCircleOutline";
16

17
// Delete/Remove actions  
18
import Delete from "@material-ui/icons/Delete";
19
import DeleteForever from "@material-ui/icons/DeleteForever";
20
import DeleteOutline from "@material-ui/icons/DeleteOutline";
21
import Remove from "@material-ui/icons/Remove";
22
import RemoveCircle from "@material-ui/icons/RemoveCircle";
23
import RemoveCircleOutline from "@material-ui/icons/RemoveCircleOutline";
24

25
// Edit/Modify actions
26
import Edit from "@material-ui/icons/Edit";
27
import EditOutlined from "@material-ui/icons/EditOutlined";
28
import Create from "@material-ui/icons/Create";
29
```
30

31
### Search and Discovery
32

33
Icons for search, filtering, and content discovery.
34

35
```typescript { .api }
36
// Search functionality
37
import Search from "@material-ui/icons/Search";
38
import SearchOutlined from "@material-ui/icons/SearchOutlined";
39
import FilterList from "@material-ui/icons/FilterList";
40
import Sort from "@material-ui/icons/Sort";
41
import Clear from "@material-ui/icons/Clear";
42
import FindInPage from "@material-ui/icons/FindInPage";
43
import FindReplace from "@material-ui/icons/FindReplace";
44
```
45

46
### Settings and Configuration
47

48
Icons for settings, preferences, and configuration management.
49

50
```typescript { .api }
51
// Settings and configuration
52
import Settings from "@material-ui/icons/Settings";
53
import SettingsOutlined from "@material-ui/icons/SettingsOutlined";
54
import SettingsApplications from "@material-ui/icons/SettingsApplications";
55
import Tune from "@material-ui/icons/Tune";
56
import Build from "@material-ui/icons/Build";
57
import BuildOutlined from "@material-ui/icons/BuildOutlined";
58
```
59

60
### More Actions and Menus
61

62
Icons for additional actions, overflow menus, and contextual actions.
63

64
```typescript { .api }
65
// More actions and menus
66
import MoreVert from "@material-ui/icons/MoreVert";
67
import MoreHoriz from "@material-ui/icons/MoreHoriz";
68
import Launch from "@material-ui/icons/Launch";
69
import OpenInNew from "@material-ui/icons/OpenInNew";
70
import OpenInBrowser from "@material-ui/icons/OpenInBrowser";
71
import OpenWith from "@material-ui/icons/OpenWith";
72
```
73

74
### Refresh and Sync
75

76
Icons for refresh operations, synchronization, and data updates.
77

78
```typescript { .api }
79
// Refresh and sync actions
80
import Refresh from "@material-ui/icons/Refresh";
81
import RefreshOutlined from "@material-ui/icons/RefreshOutlined";
82
import Sync from "@material-ui/icons/Sync";
83
import SyncOutlined from "@material-ui/icons/SyncOutlined";
84
import Update from "@material-ui/icons/Update";
85
import Replay from "@material-ui/icons/Replay";
86
```
87

88
### Undo and Redo
89

90
Icons for undo/redo operations and history management.
91

92
```typescript { .api }
93
// Undo/Redo operations
94
import Undo from "@material-ui/icons/Undo";
95
import UndoOutlined from "@material-ui/icons/UndoOutlined";
96
import Redo from "@material-ui/icons/Redo";
97
import RedoOutlined from "@material-ui/icons/RedoOutlined";
98
import History from "@material-ui/icons/History";
99
import RestoreFromTrash from "@material-ui/icons/RestoreFromTrash";
100
```
101

102
**Usage Examples:**
103

104
```typescript
105
import React from 'react';
106
import { Add, Delete, Edit, Search, Settings, MoreVert } from '@material-ui/icons';
107
import { IconButton, Tooltip } from '@material-ui/core';
108

109
function ActionToolbar() {
110
  return (
111
    <div>
112
      <Tooltip title="Add new item">
113
        <IconButton>
114
          <Add />
115
        </IconButton>
116
      </Tooltip>
117
      
118
      <Tooltip title="Search">
119
        <IconButton>
120
          <Search />
121
        </IconButton>
122
      </Tooltip>
123
      
124
      <Tooltip title="Settings">
125
        <IconButton>
126
          <Settings />
127
        </IconButton>
128
      </Tooltip>
129
      
130
      <Tooltip title="More actions">
131
        <IconButton>
132
          <MoreVert />
133
        </IconButton>
134
      </Tooltip>
135
    </div>
136
  );
137
}
138

139
// Using different variants
140
function ActionVariants() {
141
  return (
142
    <div>
143
      <Add /> {/* Filled version */}
144
      <AddOutlined /> {/* Outlined version */}
145
      <AddRounded /> {/* Rounded version */}
146
      <AddSharp /> {/* Sharp version */}
147
      <AddTwoTone /> {/* Two-tone version */}
148
    </div>
149
  );
150
}
151
```