How to fix Material Icons for Flutter Web (Hummingbird)

Target Audience: Beginner

Recipe: Material Icons for Flutter Web (Hummingbird).

Focus Widget: Material Icons

Goal: Fix MaterialIcon rendering for Flutter WebApps.

Checkout the companion video tutorial:

[Before] Default Material Icons rendering in Flutter WebApp:

[After] Fixed Material Icons rendering for Flutter WebApp:

Lets's go!

Step #1. pubspec.yaml

Add material icon dependency in pubspec.yaml:

flutter:
  uses-material-design: true

Step #2. Download Material Icons font

Download MaterialIcons fonts from here. Copy MaterialIcons-Regular.ttf file under web/assets/fonts directory.

Step #3. FontManifest.json

Add FontManifest.json in web/assets directory.

[
  {
    "fonts": [
      {
        "asset": "fonts/MaterialIcons-Regular.ttf"
      }
    ],
    "family": "MaterialIcons"
  }
]

Note: I've removed debug banner to be able to show Settings vertical dots. All you need to do is to set debugShowCheckedModeBanner flag to false in MaterialApp like below:

return new MaterialApp(
      debugShowCheckedModeBanner: false,
      ...
    );

Source code repo: Source code is here

References:

1. This Github issue
2. Material Icons

Happy cooking with Flutter :)

Liked the article ? Couldn't find a topic of your interest ? Please leave comments or email me about topics you would like me to write ! BTW I love cupcakes and coffee both :)

Follow me at twitter