[Flutter] Newly added icons on flutter web are invisible

When adding new icons to a flutter web app, presumably the old icon font stays in cache, so any new icons appear invisible:



After clearing cache with browser's devtools, the icon appears as expected:



I suspect the old icon font is being stored in browser's cache. My question is how to remove it from cache of all the users using my website if i decide to add new icons?

Steps to reproduce:

1. Make a flutter app with one icon:

import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.abc),
],
),
),
),
);
}
}

1. Build the app with flutter build web and upload the app to a web hosting. Works as expected:

1. Update the app code, adding a new, different icon:

import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.abc),
ElevatedButton.icon(
onPressed: () {},
icon: const Icon(Icons.add),
label: const Text('foo'),
),
],
),
),
),
);
}
}


ElevatedButton was added to demonstrate that it's not the app code not being updated, but the icon font.

1. Add a cache-busting string in web/index.html

...
<script src="flutter.js?v=1" defer></script>
...

1. Upload the app to the same website.

The button is there, but the newly added icon is invisible:

1. After clearing cache with browser's devtools, looks as expected:

I tried looking through web/index.html for a way to make user re-download the new icon font, couldnt find any links to the icons. I've googled about this issue and found similar articles, but they were talking about migrating to a new flutter version and the incorrect icons being shown, which is not the issue im having.

Continue reading...