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.

`IconData`

Packages that represent icons as IconDatas inherit automatically. You can also use FIcons.iconData to simplify customization.

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

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

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.

Packages with custom icon widgets that inherit from the ambient IconTheme can be passed directly:

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

1final theme = FThemeData(
2  colors: FColors.zincLight,
3  touch: false,
4  icons: FIcons(
5    arrowLeft: (_, {semanticsLabel}) => Builder(
6      builder: (context) {
7        final data = IconTheme.of(context);
8        return SvgPicture.asset(
9          'assets/icons/arrow_left.svg',
10          width: data.size,
11          height: data.size,
12          colorFilter: data.color == null
13              ? null
14              : ColorFilter.mode(data.color!, BlendMode.srcIn),
15          semanticsLabel: semanticsLabel,
16        );
17      },
18    ),
19    // ... apply the same pattern to the rest of the icons.
20  ),
21);
22

Customizing Icons

IconData

Custom Icon Widgets and SVG Icons

On this page

`IconData`