Flutter 2.2 iconData: wrong icon rendering on real iOS mobile devices

Since when I upgraded to Flutter 2.2, when I use IconData to create an Icon widget, I get different icons on real mobile devices.

You can find below a sample code where I used the constant 62465 which should correspond with supervised_user_circle_outlined.

icon data 62465

Icon(
IconData(
62465,
fontFamily: ‘MaterialIcons’)
)

On iOS simulators I can see the correct icon.

right icon on ios simulator

When I deploy my app on a real iOS device, I see a completely different icon as you can see in the image below.

wrong on iphone 8

My Flutter’s version is:

Flutter 2.2.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b227420 (8 days ago) • 2021-05-14 19:12:57 -0700
Engine • revision a9d88a4d18
Tools • Dart 2.13.0

I tested the anomaly on iPhone 8 with OS version 14.5.1

2 thoughts on “Flutter 2.2 iconData: wrong icon rendering on real iOS mobile devices

  1. I am seeing the same issue on flutter web as well.
    Flutter 2.2.0 • channel stable • https://github.com/flutter/flutter.git
    Framework • revision b227420 (9 days ago) • 2021-05-14 19:12:57 -0700
    Engine • revision a9d88a4d18
    Tools • Dart 2.13.0
    Issue gets resolved when user clears browser cache and reload

  2. We are seeing Icons replaced in certain environments in Flutter Web since upgrading to Flutter 2.2.0. Since the original post mentions “Flutter 2.0” I want to stress this is happening only since 2.2.0 and not limited to Flutter mobile.

    Screenshots below on Chrome 90.0.4430.212, same issue on latest Firefox and on on mobile devices.

    Screenshot 2021-05-25 at 12 19 11

    left top: Local Development Machine
    left bottom: Staging
    right: Live / CDN

    same codebase using Material Icons from package:flutter/material.dart.

    bottomNavigationBar: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Start',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.map),
                label: 'Karte',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.list),
                label: 'Stücke',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.emoji_objects),
                label: 'Lösung',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.help),
                label: 'Hilfe',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.info),
                label: 'Impressum',
              ),
            ],
    

    I’ll add more info if possible.

    [✓] Flutter (Channel stable, 2.2.0, on macOS 11.3 20E232 darwin-x64, locale
        en-GB)
    [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    [✓] Xcode - develop for iOS and macOS
    [✓] Chrome - develop for the web
    [✓] Android Studio (version 4.1)
    [✓] IntelliJ IDEA Community Edition (version 2021.1.1)
    [✓] VS Code (version 1.56.2)
    [✓] Connected device (2 available)
    

Comments are closed.