Flutter custom icon fonts

Gen icon fonts

Image for post

When you import your icons which exported from figma, may you face this error

Image for post

=> To solve this, install sketch -> New file -> drag & drop svg file -> Expand icon (left panel) -> Select all path => Select Layer menu -> Convert to Outlines

Image for post

Then select icon (left panel) -> Select “Make exportable” (right panel) -> Select “svg” -> Export

Image for post
  • Select tab “Generate Font F”
Image for post
  • Download font, extract and copy .ttf font file to project
Image for post

put font file to project

Image for post
  • Define font in flutter project pubspec.yaml
uses-material-design: true
- assets/base/icons/
- assets/base/fonts/
- assets/app/icons/
- assets/app/fonts/fonts:
- family: icomoon
- asset: assets/app/fonts/icomoon/icomoon.ttf
  • Use
Text('hello \ue901', style: normalTextStyle(13, color: Colors.white, fontFamily: 'icomoon'),),# or with IconDatastatic const IconData home = IconData(0xe901, fontFamily: 'icomoon', color: Colors.white);

Note: e901 is the code of icon

Image for post

Flutter custom chat emotion text


Custom TextEditingController to style multi color icon font


Flutter Insert text to TextField



Leave a Reply

Your email address will not be published.Required fields are marked *