Find and suggest replacement icons during migration. This skill provides the complete list of available icons in the One-UI system.
Arguments
$ARGUMENTS - Query or command:
<old-icon-name> - Find a replacement for a specific iconlist - Show all available iconssearch <keyword> - Search icons by keywordcategory <name> - Show icons by category (navigation, action, status, network, file, etc.)
Available Icons
Navigation & Menu
icon:arrow_backicon:arrow_forwardicon:arrow_lefticon:arrow_righticon:arrow_upwardicon:arrow_downwardicon:arrow_drop_downicon:arrow_drop_upicon:arrow_circle_downicon:arrow_circle_upicon:navigate_beforeicon:navigate_nexticon:first_pageicon:last_pageicon:keyboard_arrow_downicon:keyboard_arrow_upicon:menuicon:appsicon:homeicon:dashboard
Actions
icon:addicon:add_boxicon:add_circleicon:add_linkicon:removeicon:remove_circleicon:editicon:edit_attributesicon:edit_notificationsicon:edit_officon:delete_forevericon:saveicon:cancelicon:clearicon:doneicon:check_circleicon:refreshicon:sync_alticon:loopicon:undoicon:redoicon:downloadicon:uploadicon:sendicon:forwardicon:launchicon:searchicon:filter_alticon:tuneicon:settingsicon:settings_applicationsicon:settings_etherneticon:settings_input_componenticon:settings_powericon:settings_remoteicon:settings_suggesticon:buildicon:create_new_foldericon:attach_fileicon:file_copyicon:linkicon:link_officon:loginicon:lockicon:lock_openicon:vpn_keyicon:fullscreenicon:fullscreen_exiticon:drag_indicatoricon:place_item
Status & Indicators
icon:infoicon:info_outlineicon:helpicon:help_outlineicon:warningicon:erroricon:priority_highicon:notificationsicon:notifications_activeicon:notifications_noneicon:notifications_officon:circleicon:panorama_fish_eyeicon:highlight_officon:hide_sourceicon:visibilityicon:visibility_officon:task_alticon:pending_actionsicon:running_with_errorsicon:sync_disabledicon:sync_problemicon:troubleshooticon:verified_usericon:policyicon:security
Network & Connectivity
icon:wifiicon:wifi_officon:wifi_1_baricon:wifi_2_baricon:wifi_medium_darkThemeicon:wifi_medium_lightThemeicon:wifi_strength_darkThemeicon:wifi_strength_lightThemeicon:wifi_weak_darkThemeicon:wifi_weak_lightThemeicon:signal_cellular_alticon:signal_cellular_alt_1_baricon:signal_cellular_alt_2_baricon:lanicon:device_hubicon:routericon:cableicon:cloud_officon:cloud_queueicon:cloud-upload-outlineicon:apiicon:storageicon:network_manage
Files & Documents
icon:foldericon:folder_officon:folder_openicon:articleicon:descriptionicon:assignmenticon:inventoryicon:archiveicon:unarchive
People & Accounts
icon:personicon:account_boxicon:account_treeicon:group_workicon:engineering-maintenance
Time & Schedule
icon:scheduleicon:schedule_sendicon:todayicon:event_busyicon:event_noteicon:historyicon:updateicon:upgrade
UI Elements
icon:staricon:star_bordericon:favoriteicon:favorite_bordericon:bookmark_staricon:push_pinicon:outlined-push_pinicon:labelicon:local_offericon:categoryicon:styleicon:widgetsicon:extensionicon:more_verticon:unfold_lessicon:unfold_moreicon:density_largeicon:density_mediumicon:density_smallicon:view_headlineicon:gridicon:format_list_numbered_rtl
Trends & Analytics
icon:trending_upicon:trending_downicon:trending_flaticon:calculateicon:functions
Location & GPS
icon:locationicon:my_locationicon:gps_fixedicon:near_meicon:outlined-near_meicon:apartmenticon:room_preferences
Media & Image
icon:cameraicon:image-outlineicon:wallpapericon:center_focus_weak
Communication
icon:emailicon:mark_email_unreadicon:smsicon:phoneicon:outlined-feedback
Play Controls
icon:play_circleicon:pause_circleicon:restart_alticon:power_settings_newicon:left_circle
MX Custom Icons (Moxa-specific)
icon:mx-509_certificateicon:mx-application_cog_outlineicon:mx-application_emptyicon:mx-calendar_clockicon:mx-circle_dashicon:mx-cog-officon:mx-cursor-add-outlineicon:mx-cursor-addicon:mx-cursor-outlineicon:mx-cursoricon:mx-default_routeicon:mx-empty_state_404icon:mx-empty_state_500icon:mx-empty_state_boxicon:mx-empty_state_module_not_foundicon:mx-ethernet_porticon:mx-exporticon:mx-file-eye-outlineicon:mx-file_cog_outlineicon:mx-folder-cogicon:mx-form-textboxicon:mx-forwardicon:mx-gridicon:mx-horizontal-lineicon:mx-horizontal_align_centericon:mx-httpsicon:mx-ip_network_outlineicon:mx-lanicon:mx-moxa_device_extensionicon:mx-moxa_micon:mx-network_serviceicon:mx-package_updateicon:mx-redundancyicon:mx-remote_vpnicon:mx-restarticon:mx-ringicon:mx-router_emptyicon:mx-safety_checkicon:mx-scan_deviceicon:mx-switchingicon:mx-system-dashboardicon:mx-tag-searchicon:mx-ungroupicon:mx-verified_erroricon:mx-verified_unknowicon:mx-vertical-lineicon:mx-wan
Project Types
icon:project_type_agticon:project_type_tpeicon:apollo_projecticon:tenancy
Misc
icon:local_activityicon:card_membershipicon:medical_informationicon:dynamic_formicon:shape_line_outlineicon:cleaning_servicesicon:low_priorityicon:multiple_stopicon:terminalicon:vertical_align_centericon:pan_toolicon:pan_tool-outlineicon:outlined-gpp_badicon:outlined-stop_circleicon:outlined-verified_usericon:outlined-view_week
Common Icon Replacements
When migrating from legacy icons, use these suggested replacements:
| Legacy Icon |
Replacement |
Reason |
close |
icon:clear or icon:cancel |
Clear for dismiss, cancel for cancel action |
check |
icon:done or icon:check_circle |
Done for simple check, check_circle for emphasis |
add_circle_outline |
icon:add_circle |
Unified style |
remove_circle_outline |
icon:remove_circle |
Unified style |
settings_outline |
icon:settings |
Unified style |
cloud_upload |
icon:cloud-upload-outline |
Use outline variant |
cloud_download |
icon:download |
Use generic download |
file_download |
icon:download |
Use generic download |
file_upload |
icon:upload |
Use generic upload |
exit_to_app |
icon:login or icon:launch |
Login for auth, launch for external |
open_in_new |
icon:launch |
Use launch for external links |
content_copy |
icon:file_copy |
Use file_copy |
feedback |
icon:outlined-feedback |
Use outlined variant |
pin |
icon:push_pin |
Use push_pin |
ethernet |
icon:settings_ethernet or icon:mx-ethernet_port |
Use MX variant for ports |
network_check |
icon:network_manage |
Use network_manage |
vpn_lock |
icon:mx-remote_vpn |
Use MX VPN icon |
restart |
icon:restart_alt or icon:mx-restart |
Use MX variant if available |
sync |
icon:sync_alt or icon:loop |
sync_alt for bidirectional, loop for repeat |
bolt |
icon:power_settings_new |
Use power icon |
certificate |
icon:mx-509_certificate |
Use MX certificate icon |
Workflow
For <old-icon-name> query:
- Search for exact match in available icons
- If not found, suggest closest alternatives based on:
- Semantic meaning
- Visual similarity
- Common use cases
- Provide 2-3 options with explanations
For search <keyword>:
- Search icon names containing the keyword
- Return all matches grouped by category
For category <name>:
- Return all icons in that category
- Categories: navigation, action, status, network, file, people, time, ui, trend, location, media, communication, play, mx, project, misc
Output Format
For replacement queries:
## Icon Replacement for `{old-icon}`
**Recommended:** `icon:{recommended}` - {reason}
**Alternatives:**
- `icon:{alt1}` - {reason1}
- `icon:{alt2}` - {reason2}
**Usage:**
```html
<mat-icon svgIcon="{recommended}"></mat-icon>
### For search/list:
Icons matching "{keyword}"
{Category 1}
{Category 2}
1---2name: icon-replacement3description: Find replacement icons for migration. Use when migrating old code that uses icons not available in the new system, or when you need to find a suitable icon from the available icon set.4---5
6Find and suggest replacement icons during migration. This skill provides the complete list of available icons in the One-UI system.
7
8## Arguments
9
10- `$ARGUMENTS` - Query or command:
11 - `<old-icon-name>` - Find a replacement for a specific icon
12 - `list` - Show all available icons
13 - `search <keyword>` - Search icons by keyword
14 - `category <name>` - Show icons by category (navigation, action, status, network, file, etc.)
15
16## Available Icons
17
18### Navigation & Menu
19- `icon:arrow_back`
20- `icon:arrow_forward`
21- `icon:arrow_left`
22- `icon:arrow_right`
23- `icon:arrow_upward`
24- `icon:arrow_downward`
25- `icon:arrow_drop_down`
26- `icon:arrow_drop_up`
27- `icon:arrow_circle_down`
28- `icon:arrow_circle_up`
29- `icon:navigate_before`
30- `icon:navigate_next`
31- `icon:first_page`
32- `icon:last_page`
33- `icon:keyboard_arrow_down`
34- `icon:keyboard_arrow_up`
35- `icon:menu`
36- `icon:apps`
37- `icon:home`
38- `icon:dashboard`
39
40### Actions
41- `icon:add`
42- `icon:add_box`
43- `icon:add_circle`
44- `icon:add_link`
45- `icon:remove`
46- `icon:remove_circle`
47- `icon:edit`
48- `icon:edit_attributes`
49- `icon:edit_notifications`
50- `icon:edit_off`
51- `icon:delete_forever`
52- `icon:save`
53- `icon:cancel`
54- `icon:clear`
55- `icon:done`
56- `icon:check_circle`
57- `icon:refresh`
58- `icon:sync_alt`
59- `icon:loop`
60- `icon:undo`
61- `icon:redo`
62- `icon:download`
63- `icon:upload`
64- `icon:send`
65- `icon:forward`
66- `icon:launch`
67- `icon:search`
68- `icon:filter_alt`
69- `icon:tune`
70- `icon:settings`
71- `icon:settings_applications`
72- `icon:settings_ethernet`
73- `icon:settings_input_component`
74- `icon:settings_power`
75- `icon:settings_remote`
76- `icon:settings_suggest`
77- `icon:build`
78- `icon:create_new_folder`
79- `icon:attach_file`
80- `icon:file_copy`
81- `icon:link`
82- `icon:link_off`
83- `icon:login`
84- `icon:lock`
85- `icon:lock_open`
86- `icon:vpn_key`
87- `icon:fullscreen`
88- `icon:fullscreen_exit`
89- `icon:drag_indicator`
90- `icon:place_item`
91
92### Status & Indicators
93- `icon:info`
94- `icon:info_outline`
95- `icon:help`
96- `icon:help_outline`
97- `icon:warning`
98- `icon:error`
99- `icon:priority_high`
100- `icon:notifications`
101- `icon:notifications_active`
102- `icon:notifications_none`
103- `icon:notifications_off`
104- `icon:circle`
105- `icon:panorama_fish_eye`
106- `icon:highlight_off`
107- `icon:hide_source`
108- `icon:visibility`
109- `icon:visibility_off`
110- `icon:task_alt`
111- `icon:pending_actions`
112- `icon:running_with_errors`
113- `icon:sync_disabled`
114- `icon:sync_problem`
115- `icon:troubleshoot`
116- `icon:verified_user`
117- `icon:policy`
118- `icon:security`
119
120### Network & Connectivity
121- `icon:wifi`
122- `icon:wifi_off`
123- `icon:wifi_1_bar`
124- `icon:wifi_2_bar`
125- `icon:wifi_medium_darkTheme`
126- `icon:wifi_medium_lightTheme`
127- `icon:wifi_strength_darkTheme`
128- `icon:wifi_strength_lightTheme`
129- `icon:wifi_weak_darkTheme`
130- `icon:wifi_weak_lightTheme`
131- `icon:signal_cellular_alt`
132- `icon:signal_cellular_alt_1_bar`
133- `icon:signal_cellular_alt_2_bar`
134- `icon:lan`
135- `icon:device_hub`
136- `icon:router`
137- `icon:cable`
138- `icon:cloud_off`
139- `icon:cloud_queue`
140- `icon:cloud-upload-outline`
141- `icon:api`
142- `icon:storage`
143- `icon:network_manage`
144
145### Files & Documents
146- `icon:folder`
147- `icon:folder_off`
148- `icon:folder_open`
149- `icon:article`
150- `icon:description`
151- `icon:assignment`
152- `icon:inventory`
153- `icon:archive`
154- `icon:unarchive`
155
156### People & Accounts
157- `icon:person`
158- `icon:account_box`
159- `icon:account_tree`
160- `icon:group_work`
161- `icon:engineering-maintenance`
162
163### Time & Schedule
164- `icon:schedule`
165- `icon:schedule_send`
166- `icon:today`
167- `icon:event_busy`
168- `icon:event_note`
169- `icon:history`
170- `icon:update`
171- `icon:upgrade`
172
173### UI Elements
174- `icon:star`
175- `icon:star_border`
176- `icon:favorite`
177- `icon:favorite_border`
178- `icon:bookmark_star`
179- `icon:push_pin`
180- `icon:outlined-push_pin`
181- `icon:label`
182- `icon:local_offer`
183- `icon:category`
184- `icon:style`
185- `icon:widgets`
186- `icon:extension`
187- `icon:more_vert`
188- `icon:unfold_less`
189- `icon:unfold_more`
190- `icon:density_large`
191- `icon:density_medium`
192- `icon:density_small`
193- `icon:view_headline`
194- `icon:grid`
195- `icon:format_list_numbered_rtl`
196
197### Trends & Analytics
198- `icon:trending_up`
199- `icon:trending_down`
200- `icon:trending_flat`
201- `icon:calculate`
202- `icon:functions`
203
204### Location & GPS
205- `icon:location`
206- `icon:my_location`
207- `icon:gps_fixed`
208- `icon:near_me`
209- `icon:outlined-near_me`
210- `icon:apartment`
211- `icon:room_preferences`
212
213### Media & Image
214- `icon:camera`
215- `icon:image-outline`
216- `icon:wallpaper`
217- `icon:center_focus_weak`
218
219### Communication
220- `icon:email`
221- `icon:mark_email_unread`
222- `icon:sms`
223- `icon:phone`
224- `icon:outlined-feedback`
225
226### Play Controls
227- `icon:play_circle`
228- `icon:pause_circle`
229- `icon:restart_alt`
230- `icon:power_settings_new`
231- `icon:left_circle`
232
233### MX Custom Icons (Moxa-specific)
234- `icon:mx-509_certificate`
235- `icon:mx-application_cog_outline`
236- `icon:mx-application_empty`
237- `icon:mx-calendar_clock`
238- `icon:mx-circle_dash`
239- `icon:mx-cog-off`
240- `icon:mx-cursor-add-outline`
241- `icon:mx-cursor-add`
242- `icon:mx-cursor-outline`
243- `icon:mx-cursor`
244- `icon:mx-default_route`
245- `icon:mx-empty_state_404`
246- `icon:mx-empty_state_500`
247- `icon:mx-empty_state_box`
248- `icon:mx-empty_state_module_not_found`
249- `icon:mx-ethernet_port`
250- `icon:mx-export`
251- `icon:mx-file-eye-outline`
252- `icon:mx-file_cog_outline`
253- `icon:mx-folder-cog`
254- `icon:mx-form-textbox`
255- `icon:mx-forward`
256- `icon:mx-grid`
257- `icon:mx-horizontal-line`
258- `icon:mx-horizontal_align_center`
259- `icon:mx-https`
260- `icon:mx-ip_network_outline`
261- `icon:mx-lan`
262- `icon:mx-moxa_device_extension`
263- `icon:mx-moxa_m`
264- `icon:mx-network_service`
265- `icon:mx-package_update`
266- `icon:mx-redundancy`
267- `icon:mx-remote_vpn`
268- `icon:mx-restart`
269- `icon:mx-ring`
270- `icon:mx-router_empty`
271- `icon:mx-safety_check`
272- `icon:mx-scan_device`
273- `icon:mx-switching`
274- `icon:mx-system-dashboard`
275- `icon:mx-tag-search`
276- `icon:mx-ungroup`
277- `icon:mx-verified_error`
278- `icon:mx-verified_unknow`
279- `icon:mx-vertical-line`
280- `icon:mx-wan`
281
282### Project Types
283- `icon:project_type_agt`
284- `icon:project_type_tpe`
285- `icon:apollo_project`
286- `icon:tenancy`
287
288### Misc
289- `icon:local_activity`
290- `icon:card_membership`
291- `icon:medical_information`
292- `icon:dynamic_form`
293- `icon:shape_line_outline`
294- `icon:cleaning_services`
295- `icon:low_priority`
296- `icon:multiple_stop`
297- `icon:terminal`
298- `icon:vertical_align_center`
299- `icon:pan_tool`
300- `icon:pan_tool-outline`
301- `icon:outlined-gpp_bad`
302- `icon:outlined-stop_circle`
303- `icon:outlined-verified_user`
304- `icon:outlined-view_week`
305
306## Common Icon Replacements
307
308When migrating from legacy icons, use these suggested replacements:
309
310| Legacy Icon | Replacement | Reason |
311|-------------|-------------|--------|
312| `close` | `icon:clear` or `icon:cancel` | Clear for dismiss, cancel for cancel action |
313| `check` | `icon:done` or `icon:check_circle` | Done for simple check, check_circle for emphasis |
314| `add_circle_outline` | `icon:add_circle` | Unified style |
315| `remove_circle_outline` | `icon:remove_circle` | Unified style |
316| `settings_outline` | `icon:settings` | Unified style |
317| `cloud_upload` | `icon:cloud-upload-outline` | Use outline variant |
318| `cloud_download` | `icon:download` | Use generic download |
319| `file_download` | `icon:download` | Use generic download |
320| `file_upload` | `icon:upload` | Use generic upload |
321| `exit_to_app` | `icon:login` or `icon:launch` | Login for auth, launch for external |
322| `open_in_new` | `icon:launch` | Use launch for external links |
323| `content_copy` | `icon:file_copy` | Use file_copy |
324| `feedback` | `icon:outlined-feedback` | Use outlined variant |
325| `pin` | `icon:push_pin` | Use push_pin |
326| `ethernet` | `icon:settings_ethernet` or `icon:mx-ethernet_port` | Use MX variant for ports |
327| `network_check` | `icon:network_manage` | Use network_manage |
328| `vpn_lock` | `icon:mx-remote_vpn` | Use MX VPN icon |
329| `restart` | `icon:restart_alt` or `icon:mx-restart` | Use MX variant if available |
330| `sync` | `icon:sync_alt` or `icon:loop` | sync_alt for bidirectional, loop for repeat |
331| `bolt` | `icon:power_settings_new` | Use power icon |
332| `certificate` | `icon:mx-509_certificate` | Use MX certificate icon |
333
334## Workflow
335
336### For `<old-icon-name>` query:
3371. Search for exact match in available icons
3382. If not found, suggest closest alternatives based on:
339 - Semantic meaning
340 - Visual similarity
341 - Common use cases
3423. Provide 2-3 options with explanations
343
344### For `search <keyword>`:
3451. Search icon names containing the keyword
3462. Return all matches grouped by category
347
348### For `category <name>`:
3491. Return all icons in that category
3502. Categories: navigation, action, status, network, file, people, time, ui, trend, location, media, communication, play, mx, project, misc
351
352## Output Format
353
354### For replacement queries:
355```
356## Icon Replacement for `{old-icon}`
357
358**Recommended:** `icon:{recommended}` - {reason}
359
360**Alternatives:**
361- `icon:{alt1}` - {reason1}
362- `icon:{alt2}` - {reason2}
363
364**Usage:**
365```html
366<mat-icon svgIcon="{recommended}"></mat-icon>
367```
368```
369
370### For search/list:
371```
372## Icons matching "{keyword}"
373
374### {Category 1}
375- `icon:name1`
376- `icon:name2`
377
378### {Category 2}
379- `icon:name3`
380```
majiayu000