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

Revolting

It isnt an error. It is a limitation of flutter web – Refrangible

But in the samples, icons were showing – Revolting

This looks like it might be an issue with the the fonts? Your index.html or FontManifest might be missing the material icons – Sodomy

Answer 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.

Sussi

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

@Revolting 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. – Sussi

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

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

link of material icon is updated : github.com/google/material-design-icons/blob/master/font/… – Nonobjective

Answer 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"
      }
    ]
  }
]

Ovaritis

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" – Trituration

Answer 3

this solved my problem: after building web output, look in the folder build/web/assets/fonts. if There is a file named: MaterialIcons-Regular.otf then add this to pubspec.yaml:

- family: MaterialIcons
  fonts:
    - asset: fonts/MaterialIcons-Regular.otf

and the FontManifest.json (in the path web/assets/FontManifest.json):

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

}

pay attention to the format of the font file. it is otf not ttf

Stinkhorn

Answer 4

This is what I have discovered about this problem. I hope it helps somebody. If you add the font to the web/assets/fontManifest.json file and then run flutter build web, a new manifest overwrites the one you just edited (without the font). Then, when you deploy, you don't get your icons.

I made a copy of the manifest and added it to the build/web/assets folder after running flutter build web. Note, this is where I am building and deploying from for Firebase hosting. The font should also be in the build/web/assets/fonts folder. When you deploy, it should all get uploaded and your font will work.

Be aware that you will need to manually swap out the manifest after the flutter build web command for this to work for every deployment.

Amphi

Answer 5

Just make sure

uses-material-design: true

is present in pubspec.yaml parallel to assets / images

Mud

This should work - but it does not for me – Joni

Answer 6

When you upload the files to the server, make sure that the 'assets' folder is also uploaded. Because while the files are uploaded to the server in bulk, the ones in the form of folders are not uploaded, you should upload them separately.

Covetous

Answer 7

In my project the font family was defined in pubspec.yaml without capitals, but I referenced it in my code starting with a capital.

This was no problem as long as I was testing on Android: the icons showed up anyway. But apparently it does make a difference when compiling for web. Hence the icons were not shown there.

Because of problems with icons fonts on older versions of flutter mentioned all over the web I was completely on the wrong track here :-)

Tucket