CODEWITHSUNDEEP
dartflutterflutter-web
JideGuru
JideGuru

Reputation: 7660

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.

enter image description here

Any help is appreciated. Thanks

Upvotes: 20

Views: 11339

Answers (7)

Lee Probert
Lee Probert

Reputation: 10839

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.

Upvotes: 1

yvan vander sanden
yvan vander sanden

Reputation: 985

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

Upvotes: 0

Hossein Amini
Hossein Amini

Reputation: 737

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

Upvotes: 2

asasahin
asasahin

Reputation: 109

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.

Upvotes: 0

Sadhvik Chirunomula
Sadhvik Chirunomula

Reputation: 1619

Just make sure

uses-material-design: true

is present in pubspec.yaml parallel to assets / images

Upvotes: 0

Jithin Jude
Jithin Jude

Reputation: 920

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

Upvotes: 10

Zerocchi
Zerocchi

Reputation: 632

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.

Upvotes: 12

Related Questions