How to enable Custom Icons on Flutter Web?

Issue

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?

Solution

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

Answered By – Pradeep Tintali

Answer Checked By – David Goodson (FlutterFixes Volunteer)