Flutter Web not displaying Material Design Icons

Question

I started Flutter web and i wanted to add Material icons to my Flutter web app but its displaying boxes instead.

Any help is appreciated. Thanks

Solution 1

From flutter_web repository:

Note: a reference to MaterialIcons is intentionally omitted because the corresponding font is not included in this source.

If you add MaterialIcons-Extended.ttf to this directory, you can update FontManifest.json as follows:

[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "MaterialIcons-Extended.ttf"
      }
    ]
  },
  {
    "family": "GoogleSans",
    "fonts": [
      {
        "asset": "GoogleSans-Regular.ttf"
      }
    ]
  },
  {
    "family": "GalleryIcons",
    "fonts": [
      {
        "asset": "GalleryIcons.ttf"
      }
    ]
  }
]

Solution/Workaround

Download MaterialIcons-Regular.ttf here, put it inside your assets folder and update your FontManifest.json accordingly.

Solution 2

According to this you can directly add Material icons to FontManifest.json as shown below.

[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
      }
    ]
  }
]

Comments

[JideGuru]

your JSON code says MaterialIcons-Extended.ttf but you gave link to MaterialIcons-Regular.ttf. please edit

[Zerocchi]

@JideGuru the JSON is from repo, and below is my alternative solution since I can't find MaterialIcons-Extended.ttf. Will update once I get the actual font.

[Spyryto]

Putting "asset": "MaterialIcons-Regular.ttf" into the JSON file works for me.

[Mirko Raimo]

If you prefer to have the file for the font and not the web reference, you can open the link (that is the one posted in the answer above) in the browser, download the file and change the extension to .ttf . In my project, it works also in this way. In this case, in your FontManfest.json you can use the same references as the answer, but writing the asset property like this: "asset": "fonts/MaterialIcons-Extended.ttf"

[M Karimi]

@Zerocchi I can't update FontManifest.json file, because I deploy web flutter directly via azure pipeline. So you have any solutions else?