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:
- family: FishFarm
- asset: assets/fishfarm.ttf
I can use my Icons in IOS and Android using
How can I use custom icons in Flutter Web?
Quick fix is that build your web app using
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.
Answered By – Pradeep Tintali
Answer Checked By – David Goodson (FlutterFixes Volunteer)