Icon Replacement

---
name: icon-replacement
description: 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.
---

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 icon
  - `list` - Show all available icons
  - `search <keyword>` - Search icons by keyword
  - `category <name>` - Show icons by category (navigation, action, status, network, file, etc.)

## Available Icons

### Navigation & Menu
- `icon:arrow_back`
- `icon:arrow_forward`
- `icon:arrow_left`
- `icon:arrow_right`
- `icon:arrow_upward`
- `icon:arrow_downward`
- `icon:arrow_drop_down`
- `icon:arrow_drop_up`
- `icon:arrow_circle_down`
- `icon:arrow_circle_up`
- `icon:navigate_before`
- `icon:navigate_next`
- `icon:first_page`
- `icon:last_page`
- `icon:keyboard_arrow_down`
- `icon:keyboard_arrow_up`
- `icon:menu`
- `icon:apps`
- `icon:home`
- `icon:dashboard`

### Actions
- `icon:add`
- `icon:add_box`
- `icon:add_circle`
- `icon:add_link`
- `icon:remove`
- `icon:remove_circle`
- `icon:edit`
- `icon:edit_attributes`
- `icon:edit_notifications`
- `icon:edit_off`
- `icon:delete_forever`
- `icon:save`
- `icon:cancel`
- `icon:clear`
- `icon:done`
- `icon:check_circle`
- `icon:refresh`
- `icon:sync_alt`
- `icon:loop`
- `icon:undo`
- `icon:redo`
- `icon:download`
- `icon:upload`
- `icon:send`
- `icon:forward`
- `icon:launch`
- `icon:search`
- `icon:filter_alt`
- `icon:tune`
- `icon:settings`
- `icon:settings_applications`
- `icon:settings_ethernet`
- `icon:settings_input_component`
- `icon:settings_power`
- `icon:settings_remote`
- `icon:settings_suggest`
- `icon:build`
- `icon:create_new_folder`
- `icon:attach_file`
- `icon:file_copy`
- `icon:link`
- `icon:link_off`
- `icon:login`
- `icon:lock`
- `icon:lock_open`
- `icon:vpn_key`
- `icon:fullscreen`
- `icon:fullscreen_exit`
- `icon:drag_indicator`
- `icon:place_item`

### Status & Indicators
- `icon:info`
- `icon:info_outline`
- `icon:help`
- `icon:help_outline`
- `icon:warning`
- `icon:error`
- `icon:priority_high`
- `icon:notifications`
- `icon:notifications_active`
- `icon:notifications_none`
- `icon:notifications_off`
- `icon:circle`
- `icon:panorama_fish_eye`
- `icon:highlight_off`
- `icon:hide_source`
- `icon:visibility`
- `icon:visibility_off`
- `icon:task_alt`
- `icon:pending_actions`
- `icon:running_with_errors`
- `icon:sync_disabled`
- `icon:sync_problem`
- `icon:troubleshoot`
- `icon:verified_user`
- `icon:policy`
- `icon:security`

### Network & Connectivity
- `icon:wifi`
- `icon:wifi_off`
- `icon:wifi_1_bar`
- `icon:wifi_2_bar`
- `icon:wifi_medium_darkTheme`
- `icon:wifi_medium_lightTheme`
- `icon:wifi_strength_darkTheme`
- `icon:wifi_strength_lightTheme`
- `icon:wifi_weak_darkTheme`
- `icon:wifi_weak_lightTheme`
- `icon:signal_cellular_alt`
- `icon:signal_cellular_alt_1_bar`
- `icon:signal_cellular_alt_2_bar`
- `icon:lan`
- `icon:device_hub`
- `icon:router`
- `icon:cable`
- `icon:cloud_off`
- `icon:cloud_queue`
- `icon:cloud-upload-outline`
- `icon:api`
- `icon:storage`
- `icon:network_manage`

### Files & Documents
- `icon:folder`
- `icon:folder_off`
- `icon:folder_open`
- `icon:article`
- `icon:description`
- `icon:assignment`
- `icon:inventory`
- `icon:archive`
- `icon:unarchive`

### People & Accounts
- `icon:person`
- `icon:account_box`
- `icon:account_tree`
- `icon:group_work`
- `icon:engineering-maintenance`

### Time & Schedule
- `icon:schedule`
- `icon:schedule_send`
- `icon:today`
- `icon:event_busy`
- `icon:event_note`
- `icon:history`
- `icon:update`
- `icon:upgrade`

### UI Elements
- `icon:star`
- `icon:star_border`
- `icon:favorite`
- `icon:favorite_border`
- `icon:bookmark_star`
- `icon:push_pin`
- `icon:outlined-push_pin`
- `icon:label`
- `icon:local_offer`
- `icon:category`
- `icon:style`
- `icon:widgets`
- `icon:extension`
- `icon:more_vert`
- `icon:unfold_less`
- `icon:unfold_more`
- `icon:density_large`
- `icon:density_medium`
- `icon:density_small`
- `icon:view_headline`
- `icon:grid`
- `icon:format_list_numbered_rtl`

### Trends & Analytics
- `icon:trending_up`
- `icon:trending_down`
- `icon:trending_flat`
- `icon:calculate`
- `icon:functions`

### Location & GPS
- `icon:location`
- `icon:my_location`
- `icon:gps_fixed`
- `icon:near_me`
- `icon:outlined-near_me`
- `icon:apartment`
- `icon:room_preferences`

### Media & Image
- `icon:camera`
- `icon:image-outline`
- `icon:wallpaper`
- `icon:center_focus_weak`

### Communication
- `icon:email`
- `icon:mark_email_unread`
- `icon:sms`
- `icon:phone`
- `icon:outlined-feedback`

### Play Controls
- `icon:play_circle`
- `icon:pause_circle`
- `icon:restart_alt`
- `icon:power_settings_new`
- `icon:left_circle`

### MX Custom Icons (Moxa-specific)
- `icon:mx-509_certificate`
- `icon:mx-application_cog_outline`
- `icon:mx-application_empty`
- `icon:mx-calendar_clock`
- `icon:mx-circle_dash`
- `icon:mx-cog-off`
- `icon:mx-cursor-add-outline`
- `icon:mx-cursor-add`
- `icon:mx-cursor-outline`
- `icon:mx-cursor`
- `icon:mx-default_route`
- `icon:mx-empty_state_404`
- `icon:mx-empty_state_500`
- `icon:mx-empty_state_box`
- `icon:mx-empty_state_module_not_found`
- `icon:mx-ethernet_port`
- `icon:mx-export`
- `icon:mx-file-eye-outline`
- `icon:mx-file_cog_outline`
- `icon:mx-folder-cog`
- `icon:mx-form-textbox`
- `icon:mx-forward`
- `icon:mx-grid`
- `icon:mx-horizontal-line`
- `icon:mx-horizontal_align_center`
- `icon:mx-https`
- `icon:mx-ip_network_outline`
- `icon:mx-lan`
- `icon:mx-moxa_device_extension`
- `icon:mx-moxa_m`
- `icon:mx-network_service`
- `icon:mx-package_update`
- `icon:mx-redundancy`
- `icon:mx-remote_vpn`
- `icon:mx-restart`
- `icon:mx-ring`
- `icon:mx-router_empty`
- `icon:mx-safety_check`
- `icon:mx-scan_device`
- `icon:mx-switching`
- `icon:mx-system-dashboard`
- `icon:mx-tag-search`
- `icon:mx-ungroup`
- `icon:mx-verified_error`
- `icon:mx-verified_unknow`
- `icon:mx-vertical-line`
- `icon:mx-wan`

### Project Types
- `icon:project_type_agt`
- `icon:project_type_tpe`
- `icon:apollo_project`
- `icon:tenancy`

### Misc
- `icon:local_activity`
- `icon:card_membership`
- `icon:medical_information`
- `icon:dynamic_form`
- `icon:shape_line_outline`
- `icon:cleaning_services`
- `icon:low_priority`
- `icon:multiple_stop`
- `icon:terminal`
- `icon:vertical_align_center`
- `icon:pan_tool`
- `icon:pan_tool-outline`
- `icon:outlined-gpp_bad`
- `icon:outlined-stop_circle`
- `icon:outlined-verified_user`
- `icon: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:
1. Search for exact match in available icons
2. If not found, suggest closest alternatives based on:
   - Semantic meaning
   - Visual similarity
   - Common use cases
3. Provide 2-3 options with explanations

### For `search <keyword>`:
1. Search icon names containing the keyword
2. Return all matches grouped by category

### For `category <name>`:
1. Return all icons in that category
2. 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}
- `icon:name1`
- `icon:name2`

### {Category 2}
- `icon:name3`
```