0
# Toggle Icons
1

2
Icons for toggles, checkboxes, radio buttons, selection states, and interactive controls.
3

4
## Capabilities
5

6
### Checkbox Icons
7

8
Icons for checkbox states and selection controls.
9

10
```typescript { .api }
11
// Checkbox states
12
import CheckBox from "@material-ui/icons/CheckBox";
13
import CheckBoxOutlined from "@material-ui/icons/CheckBoxOutlined";
14
import CheckBoxOutlineBlank from "@material-ui/icons/CheckBoxOutlineBlank";
15
import CheckBoxOutlineBlankOutlined from "@material-ui/icons/CheckBoxOutlineBlankOutlined";
16
import IndeterminateCheckBox from "@material-ui/icons/IndeterminateCheckBox";
17
import IndeterminateCheckBoxOutlined from "@material-ui/icons/IndeterminateCheckBoxOutlined";
18

19
// Check marks
20
import Check from "@material-ui/icons/Check";
21
import CheckOutlined from "@material-ui/icons/CheckOutlined";
22
import CheckCircle from "@material-ui/icons/CheckCircle";
23
import CheckCircleOutline from "@material-ui/icons/CheckCircleOutline";
24
import CheckCircleOutlined from "@material-ui/icons/CheckCircleOutlined";
25
```
26

27
### Radio Button Icons
28

29
Icons for radio button states and single-selection controls.
30

31
```typescript { .api }
32
// Radio button states
33
import RadioButtonChecked from "@material-ui/icons/RadioButtonChecked";
34
import RadioButtonUnchecked from "@material-ui/icons/RadioButtonUnchecked";
35
import RadioButtonCheckedOutlined from "@material-ui/icons/RadioButtonCheckedOutlined";
36
import RadioButtonUncheckedOutlined from "@material-ui/icons/RadioButtonUncheckedOutlined";
37

38
// Selection indicators
39
import FiberManualRecord from "@material-ui/icons/FiberManualRecord";
40
import FiberManualRecordOutlined from "@material-ui/icons/FiberManualRecordOutlined";
41
```
42

43
### Toggle Switch Icons
44

45
Icons for toggle switches and on/off states.
46

47
```typescript { .api }
48
// Toggle switches
49
import ToggleOn from "@material-ui/icons/ToggleOn";
50
import ToggleOnOutlined from "@material-ui/icons/ToggleOnOutlined";
51
import ToggleOff from "@material-ui/icons/ToggleOff";
52
import ToggleOffOutlined from "@material-ui/icons/ToggleOffOutlined";
53

54
// Power states
55
import PowerSettingsNew from "@material-ui/icons/PowerSettingsNew";
56
import PowerSettingsNewOutlined from "@material-ui/icons/PowerSettingsNewOutlined";
57
import Power from "@material-ui/icons/Power";
58
import PowerOff from "@material-ui/icons/PowerOff";
59
```
60

61
### Star Rating Icons
62

63
Icons for star ratings and favoriting functionality.
64

65
```typescript { .api }
66
// Star ratings
67
import Star from "@material-ui/icons/Star";
68
import StarOutlined from "@material-ui/icons/StarOutlined";
69
import StarBorder from "@material-ui/icons/StarBorder";
70
import StarBorderOutlined from "@material-ui/icons/StarBorderOutlined";
71
import StarHalf from "@material-ui/icons/StarHalf";
72
import StarHalfOutlined from "@material-ui/icons/StarHalfOutlined";
73

74
// Favorites
75
import Favorite from "@material-ui/icons/Favorite";
76
import FavoriteOutlined from "@material-ui/icons/FavoriteOutlined";
77
import FavoriteBorder from "@material-ui/icons/FavoriteBorder";
78
import FavoriteBorderOutlined from "@material-ui/icons/FavoriteBorderOutlined";
79
```
80

81
### Bookmark Icons
82

83
Icons for bookmarking and saved items.
84

85
```typescript { .api }
86
// Bookmarks
87
import Bookmark from "@material-ui/icons/Bookmark";
88
import BookmarkOutlined from "@material-ui/icons/BookmarkOutlined";
89
import BookmarkBorder from "@material-ui/icons/BookmarkBorder";
90
import BookmarkBorderOutlined from "@material-ui/icons/BookmarkBorderOutlined";
91
import BookmarkAdded from "@material-ui/icons/BookmarkAdded";
92
import BookmarkAddedOutlined from "@material-ui/icons/BookmarkAddedOutlined";
93

94
// Flag and pin
95
import Flag from "@material-ui/icons/Flag";
96
import FlagOutlined from "@material-ui/icons/FlagOutlined";
97
import PushPin from "@material-ui/icons/PushPin";
98
import PushPinOutlined from "@material-ui/icons/PushPinOutlined";
99
```
100

101
### Thumb Voting Icons
102

103
Icons for thumbs up/down voting and approval systems.
104

105
```typescript { .api }
106
// Thumb voting
107
import ThumbUp from "@material-ui/icons/ThumbUp";
108
import ThumbUpOutlined from "@material-ui/icons/ThumbUpOutlined";
109
import ThumbDown from "@material-ui/icons/ThumbDown";
110
import ThumbDownOutlined from "@material-ui/icons/ThumbDownOutlined";
111
import ThumbsUpDown from "@material-ui/icons/ThumbsUpDown";
112
import ThumbsUpDownOutlined from "@material-ui/icons/ThumbsUpDownOutlined";
113
```
114

115
### Expand/Collapse Icons
116

117
Icons for expandable content and accordion controls.
118

119
```typescript { .api }
120
// Expand/Collapse
121
import ExpandLess from "@material-ui/icons/ExpandLess";
122
import ExpandMore from "@material-ui/icons/ExpandMore";
123
import UnfoldLess from "@material-ui/icons/UnfoldLess";
124
import UnfoldMore from "@material-ui/icons/UnfoldMore";
125
import ExpandLessOutlined from "@material-ui/icons/ExpandLessOutlined";
126
import ExpandMoreOutlined from "@material-ui/icons/ExpandMoreOutlined";
127
```
128

129
**Usage Examples:**
130

131
```typescript
132
import React, { useState } from 'react';
133
import { 
134
  CheckBox, 
135
  CheckBoxOutlineBlank,
136
  RadioButtonChecked,
137
  RadioButtonUnchecked,
138
  ToggleOn,
139
  ToggleOff,
140
  Star,
141
  StarBorder,
142
  Favorite,
143
  FavoriteBorder,
144
  ExpandMore,
145
  ExpandLess
146
} from '@material-ui/icons';
147
import { IconButton, Collapse } from '@material-ui/core';
148

149
// Checkbox component
150
function CustomCheckbox({ checked, onChange, label }) {
151
  return (
152
    <div onClick={() => onChange(!checked)} style={{ cursor: 'pointer' }}>
153
      {checked ? <CheckBox color="primary" /> : <CheckBoxOutlineBlank />}
154
      <span style={{ marginLeft: 8 }}>{label}</span>
155
    </div>
156
  );
157
}
158

159
// Radio button group
160
function RadioGroup({ options, selected, onChange }) {
161
  return (
162
    <div>
163
      {options.map((option) => (
164
        <div key={option.value} onClick={() => onChange(option.value)} style={{ cursor: 'pointer' }}>
165
          {selected === option.value ? <RadioButtonChecked color="primary" /> : <RadioButtonUnchecked />}
166
          <span style={{ marginLeft: 8 }}>{option.label}</span>
167
        </div>
168
      ))}
169
    </div>
170
  );
171
}
172

173
// Toggle switch
174
function ToggleSwitch({ enabled, onChange, label }) {
175
  return (
176
    <div onClick={() => onChange(!enabled)} style={{ cursor: 'pointer' }}>
177
      {enabled ? <ToggleOn color="primary" /> : <ToggleOff />}
178
      <span style={{ marginLeft: 8 }}>{label}</span>
179
    </div>
180
  );
181
}
182

183
// Star rating
184
function StarRating({ rating, maxRating = 5, onChange }) {
185
  return (
186
    <div>
187
      {Array.from({ length: maxRating }, (_, index) => (
188
        <IconButton key={index} onClick={() => onChange(index + 1)}>
189
          {index < rating ? <Star color="primary" /> : <StarBorder />}
190
        </IconButton>
191
      ))}
192
    </div>
193
  );
194
}
195

196
// Favorite button
197
function FavoriteButton({ isFavorite, onChange }) {
198
  return (
199
    <IconButton onClick={() => onChange(!isFavorite)}>
200
      {isFavorite ? <Favorite color="error" /> : <FavoriteBorder />}
201
    </IconButton>
202
  );
203
}
204

205
// Expandable section
206
function ExpandableSection({ title, children, defaultExpanded = false }) {
207
  const [expanded, setExpanded] = useState(defaultExpanded);
208

209
  return (
210
    <div>
211
      <div 
212
        onClick={() => setExpanded(!expanded)} 
213
        style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
214
      >
215
        <span>{title}</span>
216
        {expanded ? <ExpandLess /> : <ExpandMore />}
217
      </div>
218
      <Collapse in={expanded}>
219
        <div style={{ paddingLeft: 16 }}>
220
          {children}
221
        </div>
222
      </Collapse>
223
    </div>
224
  );
225
}
226

227
// Multi-select list
228
function MultiSelectList({ items, selectedItems, onSelectionChange }) {
229
  const toggleSelection = (item) => {
230
    const isSelected = selectedItems.includes(item.id);
231
    if (isSelected) {
232
      onSelectionChange(selectedItems.filter(id => id !== item.id));
233
    } else {
234
      onSelectionChange([...selectedItems, item.id]);
235
    }
236
  };
237

238
  return (
239
    <div>
240
      {items.map((item) => (
241
        <div key={item.id} onClick={() => toggleSelection(item)} style={{ cursor: 'pointer' }}>
242
          {selectedItems.includes(item.id) ? <CheckBox color="primary" /> : <CheckBoxOutlineBlank />}
243
          <span style={{ marginLeft: 8 }}>{item.name}</span>
244
        </div>
245
      ))}
246
    </div>
247
  );
248
}
249
```