Banner

icondata_to_text_extension

Pub Version GitHub License

Convert any Flutter IconData (Material or Cupertino) into inline Text or TextSpan widgets with correct font rendering.
Ideal for rich text, custom layouts, or displaying icons as text in Flutter apps.

✨ Fully null-safe, simple, customizable, and accessible.

🚀 Features

  • ✅ Supports both Material and Cupertino icons
  • ✅ Converts IconData to TextSpan or Text widgets
  • ✅ Preserves original icon font family and package
  • ✅ Accepts optional TextStyle with easy overrides
  • ✅ Prefix and postfix text support — combine icon and surrounding text in one widget
  • ✅ Inline Text.rich support with extra layout controls
  • ✅ Optional iconSize and iconColor overrides for icon only
  • ✅ Optional semanticsLabel for screen readers (accessibility)
  • ✅ Support for TextAlign, TextDirection, maxLines, and TextOverflow in .toText()
  • ✅ iconToString() utility to get the raw character
  • ✅ Minimal, zero-dependency extension

🔧 Installation

Add to your pubspec.yaml:

dependencies:
  icon_to_text_extension_codespark: ^0.0.2

Then run:

flutter pub get

🧪 Usage

Convert IconData to TextSpan

final span = CupertinoIcons.share.toTextSpan(
  style: TextStyle(fontSize: 24, color: Colors.blue),
);

Convert IconData to Text widget

final widget = Icons.share.toText(
  style: TextStyle(fontSize: 30, color: Colors.green),
  textAlign: TextAlign.center,
);

Use prefix and postfix to reduce extra spans/widgets

final spanWithText = CupertinoIcons.share.toTextSpan(
  prefix: 'Tap ',
  postfix: ' to share',
  style: TextStyle(fontSize: 24, color: Colors.black),
);

final textWithIcon = Icons.share.toText(
  prefix: 'Click ',
  postfix: ' here',
  style: TextStyle(fontSize: 28, color: Colors.purple),
);

Use in RichText

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'Click the '),
      CupertinoIcons.share.toTextSpan(style: TextStyle(color: Colors.black)),
      TextSpan(text: ' button to share.'),
    ],
  ),
)

Override icon size and color

Icons.star.toText(
  iconSize: 32,
  iconColor: Colors.amber,
);

Add semantics label for accessibility

CupertinoIcons.share.toText(
  semanticsLabel: 'Share icon',
);

📷 Preview

Example Example

💡 Roadmap

  • x IconData to TextSpan conversion
  • x IconData to Text widget conversion
  • x Prefix and postfix support in text conversion
  • x Custom font sizes & colors via iconSize and iconColor
  • x Accessibility support with semanticsLabel
  • x Layout controls: TextAlign, TextDirection, maxLines, TextOverflow
  • Utility methods for inline rich content
  • Support for other custom font icons
  • Dedicated preview playground for live testing

📁 Example

Clone or open the example/ folder and run:

flutter run

🎉 Check Out My Other Packages!

Explore more Flutter packages by Katayath Sai Kiran to add unique UI effects and functionality to your apps.

👨‍💻 Maintainer

Developed with 💙 by Katayath Sai Kiran 📬 Contributions and suggestions are always welcome!

Libraries

icon_to_text_extension_codespark