How to enable Custom Icons on Flutter Web CanvasKit?

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)

I tried to use flutter run -d chrome --web-renderer html to display custom icons and it works fine. However, the web interface looks poor and performance is low, so I'd like to keep the default build that uses flutter, which is canvaskit for PC browsers.

How can I use custom icons in Flutter Web CanvasKit?

Answer 1

After reviewing the documentation and looking at different alternatives, I think the best way to go today is to not use custom fonts in Flutter. In addition to FlutterAwesomeIcons, other icons are available from Material (https://fonts.google.com/icons).

If still, it requires using custom fonts, as in my case. The best thing is to load the PNG files inside the assets, include the folder in pubspec.yaml and make a function that shows it and on which you can change the color, size, among others.

What I made was a class called FarmIcons like so...

  class FarmIcons extends StatelessWidget {
    const FarmIcons({ Key? key, required this.icono, this.height = 30.0,  this.padding = 12.0 }) : super(key: key);
  
    final String icono;
    final double height;
    final double padding;

    @override
    Widget build(BuildContext context) {

      String pathImage =
        (icono == 'bulto')      ? 'assets/icon/bulto.png' :
        (icono == 'mortalidad') ? 'assets/icon/mortalidad.png' :
        (icono == 'lago')      ? 'assets/icon/lago.png' :
        (icono == 'alevinos')    ? 'assets/icon/alevinos.png' :
        'assets/icon/general.png';

      return Padding(
        padding: EdgeInsets.all(padding),
        child: Image.asset(
                  pathImage,
                  width: 20,
                  color: Colors.black,
                  height: height,
                  fit: BoxFit.scaleDown,
                ),
      );
    }
  }