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

This looks like it might be an issue with the the fonts? Your index.html or FontManifest might be missing the material icons — Miller Swaggy, May 10 '19 at 01:20

Zerocchi · Accepted Answer · 2019-05-16T00:50:32.397

11

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.

edited May 16 '19 at 00:50

answered May 10 '19 at 03:40

Zerocchi

614
1
8
20

2

your JSON code says `MaterialIcons-Extended.ttf` but you gave link to `MaterialIcons-Regular.ttf`. please edit – JideGuru May 15 '19 at 12:34
@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. – Zerocchi May 16 '19 at 00:48
Putting `"asset": "MaterialIcons-Regular.ttf"` into the JSON file works for me. – Spyryto May 17 '19 at 15:35
@Zerocchi I can't update FontManifest.json file, because I deploy web flutter directly via azure pipeline. So you have any solutions else? – M Karimi Nov 22 '21 at 09:33

score 10 · Answer 2 · answered Jun 21 '19 at 15:39

10

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

answered Jun 21 '19 at 15:39

Jithin Jude

840
14
19

1

If you prefer to have the file for the font and not the web reference, you can open the [link](https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) (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" – Mirko Raimo Mar 10 '20 at 13:34

score 1 · Answer 3 · answered Jan 27 '22 at 08:15

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

score 1 · Answer 4 · answered May 25 '23 at 14:45

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.

score 0 · Answer 5 · edited Sep 26 '20 at 11:09

0

Just make sure

uses-material-design: true

is present in pubspec.yaml parallel to assets / images

edited Sep 26 '20 at 11:09

Arghya Sadhu

41,002
9
78
107

answered Sep 26 '20 at 09:08

Sadhvik Chirunomula

763
7
7

This should work - but it does not for me – João Abrantes Jun 19 '23 at 20:40

score 0 · Answer 6 · answered Jun 09 '21 at 20:20

0

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.

answered Jun 09 '21 at 20:20

asasahin

69
1
3

score 0 · Answer 7 · answered Apr 23 '22 at 13:38

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

Flutter Web not displaying Material Design Icons

7 Answers7