# FontAwesome Icon Migration Guide

## Package Added
```yaml
font_awesome_flutter: ^10.7.0
```

## Import Statement
```dart
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
```

## Icon Mapping Reference

### Navigation Icons
| Material Icon | FontAwesome Icon | Usage |
|---------------|------------------|-------|
| `Icons.arrow_back` | `FontAwesomeIcons.arrowLeft` | Back buttons |
| `Icons.arrow_forward` | `FontAwesomeIcons.arrowRight` | Forward navigation |
| `Icons.home` | `FontAwesomeIcons.house` | Home button |
| `Icons.menu` | `FontAwesomeIcons.bars` | Menu/hamburger |
| `Icons.close` | `FontAwesomeIcons.xmark` | Close buttons |

### Shopping & Cart Icons
| Material Icon | FontAwesome Icon | Usage |
|---------------|------------------|-------|
| `Icons.shopping_cart` | `FontAwesomeIcons.cartShopping` | Shopping cart |
| `Icons.shopping_cart_outlined` | `FontAwesomeIcons.cartShopping` | Cart outline |
| `Icons.shopping_bag` | `FontAwesomeIcons.bagShopping` | Shopping bag |
| `Icons.shopping_bag_outlined` | `FontAwesomeIcons.bagShopping` | Bag outline |
| `Icons.add_shopping_cart` | `FontAwesomeIcons.cartPlus` | Add to cart |

### Action Icons
| Material Icon | FontAwesome Icon | Usage |
|---------------|------------------|-------|
| `Icons.add` | `FontAwesomeIcons.plus` | Add/increment |
| `Icons.remove` | `FontAwesomeIcons.minus` | Remove/decrement |
| `Icons.delete` | `FontAwesomeIcons.trash` | Delete |
| `Icons.delete_outline` | `FontAwesomeIcons.trashCan` | Delete outline |
| `Icons.edit` | `FontAwesomeIcons.pen` | Edit |
| `Icons.check` | `FontAwesomeIcons.check` | Checkmark |
| `Icons.check_circle` | `FontAwesomeIcons.circleCheck` | Check circle |
| `Icons.refresh` | `FontAwesomeIcons.arrowsRotate` | Refresh |

### Status & Feedback Icons
| Material Icon | FontAwesome Icon | Usage |
|---------------|------------------|-------|
| `Icons.error` | `FontAwesomeIcons.circleXmark` | Error |
| `Icons.error_outline` | `FontAwesomeIcons.circleExclamation` | Error outline |
| `Icons.warning` | `FontAwesomeIcons.triangleExclamation` | Warning |
| `Icons.info` | `FontAwesomeIcons.circleInfo` | Info |
| `Icons.info_outline` | `FontAwesomeIcons.circleInfo` | Info outline |

### UI Elements
| Material Icon | FontAwesome Icon | Usage |
|---------------|------------------|-------|
| `Icons.search` | `FontAwesomeIcons.magnifyingGlass` | Search |
| `Icons.filter_list` | `FontAwesomeIcons.filter` | Filter |
| `Icons.sort` | `FontAwesomeIcons.arrowDownAZ` | Sort |
| `Icons.more_vert` | `FontAwesomeIcons.ellipsisVertical` | More options |
| `Icons.more_horiz` | `FontAwesomeIcons.ellipsis` | More horizontal |

### Calendar & Time
| Material Icon | FontAwesome Icon | Usage |
|---------------|------------------|-------|
| `Icons.calendar_today` | `FontAwesomeIcons.calendar` | Calendar |
| `Icons.date_range` | `FontAwesomeIcons.calendarDays` | Date range |
| `Icons.access_time` | `FontAwesomeIcons.clock` | Time |

### Payment Icons
| Material Icon | FontAwesome Icon | Usage |
|---------------|------------------|-------|
| `Icons.payment` | `FontAwesomeIcons.creditCard` | Credit card |
| `Icons.payments` | `FontAwesomeIcons.creditCard` | Payments |
| `Icons.payments_outlined` | `FontAwesomeIcons.creditCard` | Payment outline |
| `Icons.account_balance` | `FontAwesomeIcons.buildingColumns` | Bank |
| `Icons.account_balance_outlined` | `FontAwesomeIcons.buildingColumns` | Bank outline |
| `Icons.account_balance_wallet` | `FontAwesomeIcons.wallet` | Wallet |

### Media & Images
| Material Icon | FontAwesome Icon | Usage |
|---------------|------------------|-------|
| `Icons.image` | `FontAwesomeIcons.image` | Image |
| `Icons.image_not_supported` | `FontAwesomeIcons.imageSlash` | No image |
| `Icons.photo_camera` | `FontAwesomeIcons.camera` | Camera |
| `Icons.photo_library` | `FontAwesomeIcons.images` | Gallery |

### User & Profile
| Material Icon | FontAwesome Icon | Usage |
|---------------|------------------|-------|
| `Icons.person` | `FontAwesomeIcons.user` | User |
| `Icons.person_outline` | `FontAwesomeIcons.user` | User outline |
| `Icons.account_circle` | `FontAwesomeIcons.circleUser` | Account |

### Communication
| Material Icon | FontAwesome Icon | Usage |
|---------------|------------------|-------|
| `Icons.chat` | `FontAwesomeIcons.message` | Chat |
| `Icons.chat_bubble` | `FontAwesomeIcons.commentDots` | Chat bubble |
| `Icons.notifications` | `FontAwesomeIcons.bell` | Notifications |
| `Icons.phone` | `FontAwesomeIcons.phone` | Phone |
| `Icons.email` | `FontAwesomeIcons.envelope` | Email |

## Usage Examples

### Before (Material Icons)
```dart
Icon(Icons.shopping_cart, size: 24, color: Colors.blue)
Icon(Icons.add, size: 16)
IconButton(
  icon: Icon(Icons.delete_outline),
  onPressed: () {},
)
```

### After (FontAwesome)
```dart
FaIcon(FontAwesomeIcons.cartShopping, size: 24, color: Colors.blue)
FaIcon(FontAwesomeIcons.plus, size: 16)
IconButton(
  icon: FaIcon(FontAwesomeIcons.trashCan),
  onPressed: () {},
)
```

## Size Guidelines

FontAwesome icons tend to be slightly larger than Material icons at the same size. Recommended adjustments:

| Material Size | FontAwesome Size | Notes |
|---------------|------------------|-------|
| 24 (default) | 20-22 | Standard icons |
| 20 | 18 | Small icons |
| 16 | 14-15 | Tiny icons |
| 48 | 40-44 | Large icons |
| 64 | 56-60 | Extra large |

## Color Usage

FontAwesome icons use the same color properties:
```dart
// Both work the same
Icon(Icons.add, color: AppColors.primaryBlue)
FaIcon(FontAwesomeIcons.plus, color: AppColors.primaryBlue)
```

## Common Issues & Solutions

### Issue 1: Icon Size Mismatch
**Problem**: FontAwesome icons appear larger than expected
**Solution**: Reduce size by 2-4 pixels
```dart
// Before
Icon(Icons.add, size: 24)

// After
FaIcon(FontAwesomeIcons.plus, size: 20)
```

### Issue 2: Icon Alignment
**Problem**: Icons not centered properly
**Solution**: Use `IconTheme` or wrap in `SizedBox`
```dart
SizedBox(
  width: 24,
  height: 24,
  child: FaIcon(FontAwesomeIcons.plus, size: 18),
)
```

### Issue 3: Icon Not Found
**Problem**: Icon name doesn't match
**Solution**: Check FontAwesome documentation or use search
```dart
// Use camelCase, not snake_case
// ❌ FontAwesomeIcons.shopping_cart
// ✅ FontAwesomeIcons.cartShopping
```

## Migration Checklist

- [x] Add `font_awesome_flutter` to pubspec.yaml
- [x] Run `flutter pub get`
- [ ] Update all `Icons.*` to `FontAwesomeIcons.*`
- [ ] Replace `Icon()` with `FaIcon()`
- [ ] Adjust icon sizes as needed
- [ ] Test visual appearance
- [ ] Update documentation

## Cart Feature Icon Updates

### Files to Update
1. `lib/features/cart/presentation/pages/cart_page.dart`
2. `lib/features/cart/presentation/pages/checkout_page.dart`
3. `lib/features/cart/presentation/widgets/cart_item_widget.dart`
4. `lib/features/cart/presentation/widgets/payment_method_section.dart`
5. `lib/features/cart/presentation/widgets/checkout_date_picker_field.dart`

### Specific Replacements

#### cart_page.dart
- `Icons.arrow_back` → `FontAwesomeIcons.arrowLeft`
- `Icons.delete_outline` → `FontAwesomeIcons.trashCan`
- `Icons.error_outline` → `FontAwesomeIcons.circleExclamation`
- `Icons.refresh` → `FontAwesomeIcons.arrowsRotate`
- `Icons.shopping_cart_outlined` → `FontAwesomeIcons.cartShopping`
- `Icons.shopping_bag_outlined` → `FontAwesomeIcons.bagShopping`
- `Icons.check` → `FontAwesomeIcons.check`

#### cart_item_widget.dart
- `Icons.image_not_supported` → `FontAwesomeIcons.imageSlash`
- `Icons.remove` → `FontAwesomeIcons.minus`
- `Icons.add` → `FontAwesomeIcons.plus`
- `Icons.check` → `FontAwesomeIcons.check`

#### payment_method_section.dart
- `Icons.account_balance_outlined` → `FontAwesomeIcons.buildingColumns`
- `Icons.payments_outlined` → `FontAwesomeIcons.creditCard`

#### checkout_date_picker_field.dart
- `Icons.calendar_today` → `FontAwesomeIcons.calendar`

## Resources

- [FontAwesome Flutter Package](https://pub.dev/packages/font_awesome_flutter)
- [FontAwesome Icon Gallery](https://fontawesome.com/icons)
- [FontAwesome Flutter Gallery](https://github.com/fluttercommunity/font_awesome_flutter/blob/master/GALLERY.md)