Skip to content

Icons are not getting rendered in Flutter Web #32540

Closed
@AyushBherwani1998

Description

@AyushBherwani1998

I migrated my existing flutter application to flutter web. Everything is working fine but the icons are not getting rendered.
Screenshot (5)

Activity

recvec

recvec commented on May 11, 2019

@recvec

Maybe it's temporary solution, but If you mean that images are not displayed from assets, you can try to create AssetManifest.json.
I took the example from here
https://github.com/GeekyAnts/FlatApp-Flutter/blob/master/ios/Flutter/flutter_assets/AssetManifest.json
The steps that I did:

  1. move all my images from ./image folder to ./web/assets/images.
  2. create AssetManifest.json in ./web/assets/ folder using this style:
    {
    "assets/images/googlephotos.png":[
    "assets/images/googlephotos.png"
    ],
    "assets/images/pinterest.png":[
    "assets/images/pinterest.png"
    ]

}
3) load images using Image(image: AssetImage(path)) where path was like this "images/googlephotos.png"

Also, I just found out, that you can use rootBundle API for this.
On the "3. Assets" section here https://www.didierboelens.com/2019/05/flutter-for-the-web/ you can see the instruction.

AyushBherwani1998

AyushBherwani1998 commented on May 11, 2019

@AyushBherwani1998
MemberAuthor

No, I meant Material Icons are not getting rendered.

ciokan

ciokan commented on May 11, 2019

@ciokan

Make sure to add

flutter:
  uses-material-design: true

to your pubspec.yaml and also create a file FontManifest.json inside web/assets directory containing [{"fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}],"family":"MaterialIcons"}]. Restart the server and it should work, it did for me after searching 3 hours yesterday.

Make sure to also download the MaterialIcons-Regular.tff font inside web/assets/fonts dir as well.

AyushBherwani1998

AyushBherwani1998 commented on May 11, 2019

@AyushBherwani1998
MemberAuthor

Thank you. It worked.

compiledcode

compiledcode commented on Jun 7, 2019

@compiledcode

Thank you Ciokan

Your solution worked for me too.

RajeshKrSahoo

RajeshKrSahoo commented on Jun 12, 2019

@RajeshKrSahoo

Thanks!!! it worked 👍

compiledcode

compiledcode commented on Jun 12, 2019

@compiledcode
abbadabbatech

abbadabbatech commented on Jul 2, 2019

@abbadabbatech

This works for material icon fonts, is there a way to get material icon images? Like calendar_today, etc...

Gene-Dana

Gene-Dana commented on Sep 2, 2020

@Gene-Dana

MaterialIcons-Regular.ttf

Hey there ! where do I download this file??

Gene-Dana

Gene-Dana commented on Sep 2, 2020

@Gene-Dana
jeffaknine

jeffaknine commented on Sep 17, 2020

@jeffaknine

This doesn't work for me with Flutter 1.22.0-12.1.pre when releasing on NGINX

puertojose

puertojose commented on Oct 13, 2020

@puertojose

This doesn't work for me with Flutter 1.22.0-12.1.pre when releasing on NGINX

For anyone who is still having this problem. I finally found a solution that worked for me 😊.

In newer versions of Flutter where the original problem is already fix, your previous fix brakes the Icons in the updated version, let me explain:

If you have tried a previous solution of adding MaterialIcons-Extended.ttf to assets/fonts/, and creating and/or updating FontManifest.json.

Erase the font from assets/fonts/ and erase the FontManifest.json file you previously created.
And of course be sure to have uses-material-design: true in the pubspec.yaml

Then flutter clean and you are good to go

It took me an incredible amount of time to fix this, hopefully this would help someone :)

puertojose

puertojose commented on Oct 13, 2020

@puertojose

Make sure to add

flutter:
  uses-material-design: true

to your pubspec.yaml and also create a file FontManifest.json inside web/assets directory containing [{"fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}],"family":"MaterialIcons"}]. Restart the server and it should work, it did for me after searching 3 hours yesterday.

Make sure to also download the MaterialIcons-Regular.tff font inside web/assets/fonts dir as well.

In newer versions you have to undo all these changes to make your Icons work in Flutter web again.

andreagr

andreagr commented on Nov 25, 2020

@andreagr

I have an issue here, I am using FontManifest.json to also render my app's font.

If I remove it, as per @puertojose's suggestion, icons start working again but I lose my font styles. I'm in a deadlock here, any suggestion?

ghost
agavrel

agavrel commented on Jan 21, 2021

@agavrel

Be careful, the most upvoted solution is now obsolete as of 2021.
In my case (custom icons), I had forgotten to change the line with the right icon family name:

static const _kFontFam = {your icon family name};

of the dart file.

github-actions

github-actions commented on Aug 6, 2021

@github-actions

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

locked as resolved and limited conversation to collaborators on Aug 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ciokan@abbadabbatech@agavrel@jeffaknine@puertojose

        Issue actions

          Icons are not getting rendered in Flutter Web · Issue #32540 · flutter/flutter