worker/docs/FONTAWESOME_ICON_MIGRATION.md

FontAwesome Icon Migration Guide

Package Added

font_awesome_flutter: ^10.7.0

Import Statement

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)

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

After (FontAwesome)

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:

// 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

// 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

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

// Use camelCase, not snake_case
// ❌ FontAwesomeIcons.shopping_cart
// ✅ FontAwesomeIcons.cartShopping

Migration Checklist

• Add font_awesome_flutter to pubspec.yaml
• 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
• FontAwesome Icon Gallery
• FontAwesome Flutter Gallery