# Phase 1: Show Entity Icons on Cards

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Display the user-selected icon on every entity card (Providers, Trackers, Targets, Telegram Bots). Currently the IconPicker saves the icon but cards use hardcoded default icons.

## Tasks

- [ ] Task 1: Update provider cards in `frontend/src/routes/providers/+page.svelte` to show `provider.icon` (fallback to default server/cloud icon)
- [ ] Task 2: Update tracker cards in `frontend/src/routes/trackers/+page.svelte` to show `tracker.icon` (fallback to default radar icon)
- [ ] Task 3: Update target cards in `frontend/src/routes/targets/+page.svelte` to show `target.icon` (fallback to type-based default)
- [ ] Task 4: Update bot cards in `frontend/src/routes/telegram-bots/+page.svelte` to show `bot.icon` (fallback to robot icon)
- [ ] Task 5: Ensure icon rendering uses MdiIcon component with proper sizing consistent with existing card headers

## Files to Modify/Create
- `frontend/src/routes/providers/+page.svelte` — card header icon
- `frontend/src/routes/trackers/+page.svelte` — card header icon
- `frontend/src/routes/targets/+page.svelte` — card header icon
- `frontend/src/routes/telegram-bots/+page.svelte` — card header icon

## Acceptance Criteria
- Each entity card displays the saved icon if set
- Falls back to a sensible default icon per entity type when no icon is saved
- Icon styling is consistent across all card types
- No regressions in existing card layout or functionality

## Notes
- Icons are stored as MDI path constant names (e.g., the string key from `@mdi/js`)
- The MdiIcon component already exists in `frontend/src/lib/components/MdiIcon.svelte`
- IconPicker component already handles icon selection and stores the value
- Need to check exactly how icon values are stored (full path data vs key name) to render correctly

## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)

## Handoff to Next Phase
<!-- Filled in after completion -->