4

I have custom icons that work fine on IOS and Android. When I deploy on the Web, a crossed out box appears in each place in the App where my icon should appear.

The error that appears in the console is the following:

Could not find a set of Noto fonts to display all missing characters. Please add a font asset for the missing characters.

When I check the documentation on Flutter Design Fonts, I see that I have followed the steps.

My custom icons (fishfarm.ttf) are located at assets folder. In pubspec.yaml I have the following:

  fonts:
   - family: FishFarm
     fonts:
      - asset: assets/fishfarm.ttf

I can use my Icons in IOS and Android using Icon(FishFarm.nombreicono)

How can I use custom icons in Flutter Web?

1 Answer 1

7

Quick fix is that build your web app using html renderer.

To build

flutter build web --web-renderer html

or to run

flutter run -d chrome --web-renderer html

But it might give poor performance on pc browsers because flutter web uses canvaskit renderer on pc browsers for better performance and html renderer for mobile browsers.

See web renderers doc

2
  • Hi @pradeep. Do you know any alternative to handle custom icons on PC Browsers without hurting performance?
    – David L
    Commented Nov 24, 2021 at 17:31
  • it works for me. when I used '●' char for web it throw error: Could not find a set of Noto fonts to display all missing characters. Please add a font asset for the missing characters. Commented Feb 2, 2023 at 11:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.