How to fix Material Icons for Flutter Web (Hummingbird)

Posted on July 18, 2019 in Flutter

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:

Material Icons Default rendering

[After] Fixed Material Icons rendering for Flutter WebApp:

Fixed Material Icons rendering

Lets's go!

Step #1. pubspec.yaml

Add material icon dependency in pubspec.yaml:

  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


  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