How to enable Custom Icons on Flutter Web?

Question

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?

Pradeep Tintali · Accepted Answer · 2021-11-24 17:13:54Z

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

answered Nov 24, 2021 at 17:13

Pradeep Tintali

2362 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David L Over a year ago

Hi @pradeep. Do you know any alternative to handle custom icons on PC Browsers without hurting performance?

Yauheni Prakapenka Over a year ago

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.

Collectives™ on Stack Overflow

How to enable Custom Icons on Flutter Web?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related