skills/flutter/references/widgets-icons.md

name	description
widgets-icons	Flutter Icon widget, IconData, IconTheme, and icon usage

Icon Widgets

Flutter provides widgets for displaying icons from icon fonts.

Icon Widget

Display icons from icon fonts.

Icon(
  Icons.star,
  size: 24,
  color: Colors.amber,
  semanticLabel: 'Star icon',
)

Icon Properties

Icon(
  Icons.favorite,
  size: 48, // Icon size in logical pixels
  color: Colors.red, // Icon color
  fill: 0.0, // Fill weight (0.0 to 1.0) for filled icons
  weight: 400, // Font weight (100-900)
  grade: 0, // Grade adjustment (-25 to 200)
  opticalSize: 24, // Optical size adjustment
  semanticLabel: 'Favorite icon', // Accessibility label
  textDirection: TextDirection.ltr, // Text direction
)

Material Icons

Use predefined Material icons.

// Common icons
Icon(Icons.home)
Icon(Icons.search)
Icon(Icons.favorite)
Icon(Icons.settings)
Icon(Icons.person)
Icon(Icons.add)
Icon(Icons.delete)
Icon(Icons.edit)
Icon(Icons.close)
Icon(Icons.check)
Icon(Icons.arrow_back)
Icon(Icons.arrow_forward)
Icon(Icons.menu)
Icon(Icons.more_vert)

Custom Icons

Use custom icon fonts.

// Define custom icon data
class CustomIcons {
  static const IconData customIcon = IconData(
    0xe900, // Unicode code point
    fontFamily: 'CustomIcons',
    fontPackage: null,
  );
}

// Use custom icon
Icon(CustomIcons.customIcon)

IconTheme

Provide icon theme to descendant widgets.

IconTheme(
  data: IconThemeData(
    color: Colors.blue,
    size: 24,
    opacity: 1.0,
  ),
  child: Row(
    children: [
      Icon(Icons.star), // Uses theme color
      Icon(Icons.favorite), // Uses theme color
    ],
  ),
)

// Access theme
final iconTheme = IconTheme.of(context);
final iconColor = iconTheme.color;
final iconSize = iconTheme.size;

IconButton

Interactive icon button.

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    // Handle press
  },
  iconSize: 24,
  color: Colors.red,
  tooltip: 'Add to favorites',
  splashRadius: 24, // Splash radius
)

ImageIcon

Use images as icons.

ImageIcon(
  AssetImage('assets/icons/custom_icon.png'),
  size: 48,
  color: Colors.blue,
)

ImageIcon(
  NetworkImage('https://example.com/icon.png'),
  size: 48,
)

Icon Usage Patterns

// In AppBar
AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
)

// In ListTile
ListTile(
  leading: Icon(Icons.person),
  title: Text('Profile'),
  trailing: Icon(Icons.arrow_forward),
)

// In buttons
ElevatedButton.icon(
  icon: Icon(Icons.add),
  label: Text('Add'),
  onPressed: () {},
)

Key Points

• Use Icon widget to display icons
• Use Icons class for Material Design icons
• Customize icon appearance with size and color
• Use IconTheme to provide icon theme to descendants
• Use IconButton for interactive icons
• Use ImageIcon for custom image-based icons
• Provide semanticLabel for accessibility
• Use fill property for filled icon variants (Material 3)