'Flutter Web not displaying Material Design Icons

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:^[1]

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:^[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"
      }
    ]
  }
]

Solution 3:^[3]

Just make sure

uses-material-design: true

is present in pubspec.yaml parallel to assets / images

Solution 4:^[4]

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.

Solution 5:^[5]

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

Solution 6:^[6]

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 :-)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Jithin Jude
Solution 3	Arghya Sadhu
Solution 4	asasahin
Solution 5	Hossein Amini
Solution 6	yvan vander sanden

'Flutter Web not displaying Material Design Icons

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]