[web] Fonts: Material fonts/icons not rendering

[martinrybak]

Describe the bug
Material icons do not render on web.

To Reproduce

import 'package:flutter_web/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        color: Colors.white,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.print),
            Icon(Icons.settings),
            Icon(Icons.undo),
            Icon(Icons.person),
            Icon(Icons.location_on),
          ],
        ),
      ),
    );
  }
}

Expected behavior
Material design icons should render as they do on mobile.

Screenshots

Web

Mobile

Desktop (please complete the following information):

• OS: mac
• Browser chrome 73.0.3683.86, safari 12.0.3
• Dart Version 2.2.1
• Flutter Web commit SHA f9288f36fed5f3fda825082ac80f46eec6e7f62f

[yjbanov]

@hterkelsen Looks like we're missing a font?

[kevmoo]

Here's the solution I've been using https://github.com/flutter/flutter_web/blob/kevmoo.google_charts/examples/charts_example/web/assets/FontManifest.json

[kevmoo]

@martinrybak – are you able to work-around this by updating your FontManifest with content similar to https://github.com/flutter/flutter_web/blob/kevmoo.google_charts/examples/charts_example/web/assets/FontManifest.json ?

[martinrybak]

@martinrybak – are you able to work-around this by updating your FontManifest with content similar to https://github.com/flutter/flutter_web/blob/kevmoo.google_charts/examples/charts_example/web/assets/FontManifest.json ?

Yes I can confirm that this workaround works for now, thanks!

[brianegan]

Just a Q -- I ran into this as well, but will the FontManifest will eventually be generated from the pubspec?

[yjbanov]

@brianegan

[...] will the FontManifest will eventually be generated from the pubspec?

Yes, once we integrate into the Flutter SDK the flutter command-line tool should do the right thing.

[DanTup]

The links above posted as workarounds don't appear to be accessible - can anyone re-post what needs to be done? I saw some questions on Gitter about getting material icon to work but couldn't find anywhere to link them.

Edit: NM, this link turned up :) https://github.com/flutter/flutter_web/tree/master/examples/gallery/web/assets

Edit2: And the original link from above appears to be this one:
https://github.com/flutter/samples/blob/master/web/charts/example/web/assets/FontManifest.json

[keithliam]

I am also experiencing this issue. The workaround mentioned above seems to be gone.

• OS: MacOS
• Browser: Chrome 74.0.3729.131
• Dart Version: 3.0.0

Edit: @DanTup provided another link. It now works.

https://github.com/flutter/flutter_web/tree/master/examples/gallery/web/assets