CODEWITHSUNDEEP
flutter
Deborah
Deborah

Reputation: 4575

Flutter - what is correct way to invoke custom icon glyph?

I have declared a custom icon font in pubspec.yaml (icomoon.ttf).

Flutter's documentation says to invoke an icon, use...

const IconData(
  this.codePoint, {
  this.fontFamily,
});

I have an element with padding that should contain the icon.

new Padding(
  padding: new EdgeInsets.only(top: 2.0),

  how to invoke the glyph here? Need to be able to specify font size and 
  color too.

),

What is an example of how I should invoke "icomoon.ttf" glyph "e901" at size 25px with tint "myColor"?

Upvotes: 3

Views: 19058

Answers (2)

Deborah
Deborah

Reputation: 4575

I wound up copying the Google icons definitions sheet into a "theme" file for my app ("lib/themes/my_icons.dart") So in this sheet, the icons are defined like so:

class MyIcons {
  MyIcons._();

    static const IconData superCheckMark = const IconData(0xe900, fontFamily: 'icomoon');

}

In the top of the component where I wanted to use the icon, I included the file. Then the icons were invoked like so:

new Icon(MyIcons.superCheckMark, size: 30.0, color: Colors.white,),

There is also a way to create a color theme file, for example "lib/theme/my_colors.dart". In this file the color "myBlue" is defined. So then this file can also be included at the top of any panel where a custom color palette will be invoked, and it is invoked for the icons like so:

new Icon(MyIcons.superCheckMark, size: 16.0, color: MyColors.colors.myBlue,),

Hope this helps someone else.

Upvotes: 4

xqwzts
xqwzts

Reputation: 3538

You need to use that IconData in an Icon widget to display it, something like:

new Icon(const IconData(0x41, fontFamily: 'Roboto'), size: 48.0, color: Colors.red);

So in your case it would be something like:

new Icon(const IconData(0xe901, fontFamily: 'icomoon'), size: 25.0, color: myColor);

Upvotes: 10

Related Questions