Customizing Icons

Forui widgets use the icons defined in FIcons. They default to Lucide icons in FLucideIcons, which may not fit your application's custom design system.

To change the icons used across all Forui widgets, pass a custom FIcons to your FThemeData.

Icons in FIcons should inherit their properties from the ambient IconTheme created by Forui widgets. They should also implement == and hashCode so that recreating a FThemeData does not cause widgets to flicker.

`IconData`

Each icon is an FIcon. Packages that represent icons as IconDatas inherit automatically. Wrap them in an FIcon.

For example, to use Flutter's built-in Material icons:

1final theme = FThemeData(
2  colors: FColors.neutralLight,
3  touch: false,
4  icons: const FIcons(
5    arrowLeft: FIcon(Icons.arrow_left),
6    calendar: FIcon(Icons.calendar_month),
7    check: FIcon(Icons.check),
8    chevronDown: FIcon(Icons.keyboard_arrow_down),
9    chevronLeft: FIcon(Icons.chevron_left),
10    chevronRight: FIcon(Icons.chevron_right),
11    chevronUp: FIcon(Icons.keyboard_arrow_up),
12    chevronsUpDown: FIcon(Icons.unfold_more),
13    circleAlert: FIcon(Icons.error_outline),
14    clock4: FIcon(Icons.access_time),
15    ellipsis: FIcon(Icons.more_horiz),
16    error: FIcon(Icons.error_outline),
17    eye: FIcon(Icons.visibility),
18    eyeClosed: FIcon(Icons.visibility_off),
19    gripHorizontal: FIcon(Icons.drag_handle),
20    gripVertical: FIcon(Icons.drag_indicator),
21    loader: FIcon(Icons.sync),
22    loaderCircle: FIcon(Icons.refresh),
23    loaderPinwheel: FIcon(Icons.autorenew),
24    search: FIcon(Icons.search),
25    userRound: FIcon(Icons.person),
26    x: FIcon(Icons.close),
27  ),
28);
29

Custom Icon Widgets and SVG Icons

Some packages, especially those with duotone icons, use a custom icon widget to work around the default Icon widget's limitations. Whether such a widget honors the ambient IconTheme depends on the package.

Implement FIcon to use them. Packages whose widgets inherit from the ambient IconTheme need nothing further:

Packages whose widgets do not inherit, and SVG icon sets, require additional work to retrieve and apply the inherited IconThemeData. Wrap the widget in a Builder so IconTheme.of is evaluated inside the caller's wrap:

1class SvgIcon implements FIcon {
2  final String asset;
3
4  const SvgIcon(this.asset);
5
6  @override
7  Widget call(BuildContext _, {String? semanticsLabel}) => Builder(
8    builder: (context) {
9      final data = IconTheme.of(context);
10      return SvgPicture.asset(
11        asset,
12        width: data.size,
13        height: data.size,
14        colorFilter: data.color == null
15            ? null
16            : ColorFilter.mode(data.color!, BlendMode.srcIn),
17        semanticsLabel: semanticsLabel,
18      );
19    },
20  );
21
22  @override
23  bool operator ==(Object other) =>
24      identical(this, other) || other is SvgIcon && asset == other.asset;
25
26  @override
27  int get hashCode => asset.hashCode;
28}
29
30final theme = FThemeData(
31  colors: FColors.neutralLight,
32  touch: false,
33  icons: const FIcons(
34    arrowLeft: SvgIcon('assets/icons/arrow_left.svg'),
35    // ... apply the same pattern to the rest of the icons.
36  ),
37);
38

Customizing Icons

IconData

Custom Icon Widgets and SVG Icons

On this page

`IconData`