flutterreleaseflutter-webgoogle-material-icons

Flutter Material Icons (for the web) don't work in release mode


While trying out flutter-web for a website of mine, I found out that Material Icons are rendering in debug mode, but they are not working in release mode (getting replaced by boxes). The code for navBarMobile.dart is here.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:portfolio/globals/myColors.dart';
import 'package:portfolio/globals/myDimens.dart';
import 'package:portfolio/globals/mySpaces.dart';
import 'package:portfolio/globals/myString.dart';

class NavBarMobile extends StatefulWidget {
  _NavBarMobileState createState() => _NavBarMobileState();
}

class _NavBarMobileState extends State<NavBarMobile> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MyDimens.double_125,
      color: MyColors.white,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: MyDimens.double_20),
        child: Row(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  children: [
                    Container(
                      width: MyDimens.double_16,
                      height: MyDimens.double_16,
                      color: MyColors.accentColor,
                    ),
                    MySpaces.hSmallestGapInBetween,
                    Text(
                      MyStrings.myName,
                      style: TextStyle(
                          color: MyColors.black,
                          fontFamily: 'poppins',
                          fontSize: MyDimens.double_20),
                    ),
                  ],
                ),
                MySpaces.vSmallestGapInBetween,
                Text(
                  MyStrings.myWork.toUpperCase(),
                  style: TextStyle(
                      letterSpacing: 0.5,
                      color: MyColors.black,
                      fontFamily: 'avenir-light',
                      fontSize: MyDimens.double_15),
                ),
              ],
            ),
            Spacer(),
            Icon(Icons.menu, color: MyColors.accentColor, size: MyDimens.double_40,),
          ],
        ),
      ),
    );
  }
}

Here are the screenshots of my from my laptop in

  1. Release mode (using flutter run --release)

Release mode browser screenshot 2. Debug mode (using flutter run)

Debug mode browser screenshot

Additional Details:
Browser - Chrome
OS - Ubuntu 20.04


Solution

  • Since I have found a way out, I'd like to share it with others facing the same issue. In my case, I resolved this by:

    1. Downloading the MaterialIcons-Regular.tff font inside web/assets/fonts dir.
    2. Adding [{"fonts":[{"asset":"fonts/MaterialIcons-Regular.ttf"}],"family":"MaterialIcons"}] in the file web/assets/FontManifest.json