Material icons alternative styles are missing #73223

nt4f04uNd · 2021-01-02T20:36:31Z

List of affected icons (that I discovered):

color_lens
palette
format_color_reset
format_color_text
format_color_fill

Flutter has filled and outlined styles for these icons, but missing all the other and shows them the same as filled

rounded
sharp
two-tone (this one is missing for all icons library by the way)

How it looks like

Even though in https://material.io/resources/icons/?search=paint&icon=color_lens&style=baseline
they look different

Filled
Missing ones

Reproducible:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.palette),
            Icon(Icons.palette_outlined),
            Icon(Icons.palette_rounded),
            Icon(Icons.palette_sharp),
          ]
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.24.0-8.0.pre.374, on Microsoft Windows [Version 10.0.19041.685], locale ru-RU)
    • Flutter version 1.24.0-8.0.pre.374 at c:\dev\src\flutter
    • Framework revision 183f0e797a (5 weeks ago), 2020-11-26 19:12:28 +0100
    • Engine revision 20caf54969
    • Dart version 2.12.0 (build 2.12.0-76.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)

• Android SDK at C:\Users\danya\AppData\Local\Android\sdk

• Platform android-30, build-tools 30.0.2

• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java

• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

• All Android licenses accepted.
[✓] Android Studio (version 4.0)

• Android Studio at C:\Program Files\Android\Android Studio

• Flutter plugin version 50.0.1

• Dart plugin version 193.7547

• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
[✓] VS Code (version 1.52.1)

• VS Code at C:\Users\danya\AppData\Local\Programs\Microsoft VS Code

• Flutter extension version 3.18.0
[✓] Connected device (1 available)

• Redmi Note 5 (mobile) • 40c9f14 • android-arm64 • Android 9 (API 28)
• No issues found!

nt4f04uNd · 2021-01-02T20:47:54Z

i also discovered that if i download these icons from the https://material.io/resources/icons/ as svg, they will look the same too

TahaTesser · 2021-01-04T10:26:16Z

Hi @nt4f04uNd
Nice observation, I can see the same results

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.5, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.22.5 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 7891006299 (4 weeks ago), 2020-12-10 11:54:40 -0800
    • Engine revision ae90085a84
    • Dart version 2.10.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.0

[✓] Connected device (2 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64 • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios           • iOS 14.3
    ! Error: Taha’s iPad is busy: Copying cache files from device. Xcode will continue when Taha’s iPad is finished. (code -10)

! Doctor found issues in 1 category.

[✓] Flutter (Channel beta, 1.25.0-8.1.pre, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.25.0-8.1.pre at /Users/tahatesser/Code/flutter_beta
    • Framework revision 8f89f6505b (3 weeks ago), 2020-12-15 15:07:52 -0800
    • Engine revision 92ae191c17
    • Dart version 2.12.0 (build 2.12.0-133.2.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.0

[✓] Connected device (3 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64  • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios            • iOS 14.3
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 87.0.4280.88
    ! Error: Taha’s iPad is busy: Copying cache files from device. Xcode will continue when Taha’s iPad is finished. (code -10)

• No issues found!

[✓] Flutter (Channel dev, 1.26.0-1.0.pre, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.26.0-1.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision 63062a6443 (3 weeks ago), 2020-12-13 23:19:13 +0800
    • Engine revision 4797b06652
    • Dart version 2.12.0 (build 2.12.0-141.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.0

[✓] Connected device (4 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64  • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios            • iOS 14.3
    • macOS (desktop)      • macos                     • darwin-x64     • macOS 11.1 20C69 darwin-x64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 87.0.4280.88
    ! Error: Taha’s iPad is busy: Copying cache files from device. Xcode will continue when Taha’s iPad is finished. (code -10)

• No issues found!

[✓] Flutter (Channel master, 1.26.0-2.0.pre.168, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.26.0-2.0.pre.168 at /Users/tahatesser/Code/flutter_master
    • Framework revision 299e017e41 (23 hours ago), 2021-01-03 06:29:01 -0500
    • Engine revision 121b67fb85
    • Dart version 2.12.0 (build 2.12.0-179.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.0

[✓] Connected device (4 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64  • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios            • iOS 14.3
    • macOS (desktop)      • macos                     • darwin-x64     • macOS 11.1 20C69 darwin-x64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 87.0.4280.88
    ! Error: Taha’s iPad is busy: Copying cache files from device. Xcode will continue when Taha’s iPad is finished. (code -10)

• No issues found!

Thank you

guidezpl · 2021-01-05T13:46:46Z

It is expected that some icons will look the same in different styles, but I'll follow up with the icons team to determine what's going on with the filled style vs others (it looks like its shrunk on material.io, but looks the same as others with svgs).

For two-tone, see this comment

nt4f04uNd · 2021-01-14T03:51:02Z

@guidezpl i stumbled upon upon a few other icons that have wrong styles and decided to take one section ("content") from material icons and compare web and flutter

turns out a some of icons are simply missing, and other have old rounded styles (didn't test others)

flutter (filled and rounded)

web (filled and rounded)

code for comparison

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: Scaffold(
        body: DefaultTabController(
          initialIndex: 0,
          length: 2,
          child: TabBarView(
            children: [
              Center(
                child: GridView.count(
                  shrinkWrap: true,
                  crossAxisCount: 12,
                  children: [
                    Icon(Icons.add),
                    Icon(Icons.add_box),
                    Icon(Icons.add_circle),
                    Icon(Icons.add_circle_outline),
                    Icon(Icons.amp_stories),
                    Icon(Icons.archive),
                    Icon(Icons.backspace),
                    Icon(Icons.ballot),
                    Icon(Icons.biotech),
                    Icon(Icons.block),
                    Icon(Icons.calculate),
                    Container(), // Icon(Icons.change_circle),
                    Icon(Icons.clear),
                    Icon(Icons.content_copy),
                    Icon(Icons.content_cut),
                    Icon(Icons.content_paste),
                    Container(), // Icon(Icons.content_paste_off),
                    Container(), // Icon(Icons.copy_all),
                    Icon(Icons.create),
                    Icon(Icons.delete_sweep),
                    Icon(Icons.drafts),
                    Icon(Icons.dynamic_feed),
                    Icon(Icons.file_copy),
                    Icon(Icons.filter_list),
                    Icon(Icons.flag),
                    Icon(Icons.font_download),
                    Container(), // Icon(Icons.font_download_off),
                    Icon(Icons.forward),
                    Icon(Icons.gesture),
                    Icon(Icons.how_to_reg),
                    Icon(Icons.how_to_vote),
                    Icon(Icons.inbox),
                    Icon(Icons.insights),
                    Container(), // Icon(Icons.inventory_2),
                    Icon(Icons.link),
                    Icon(Icons.link_off),
                    Icon(Icons.low_priority),
                    Icon(Icons.mail),
                    Icon(Icons.markunread),
                    Icon(Icons.move_to_inbox),
                    Icon(Icons.next_week),
                    Icon(Icons.outlined_flag),
                    Icon(Icons.policy),
                    Icon(Icons.push_pin),
                    Icon(Icons.redo),
                    Icon(Icons.remove),
                    Icon(Icons.remove_circle),
                    Icon(Icons.remove_circle_outline),
                    Icon(Icons.reply),
                    Icon(Icons.reply_all),
                    Icon(Icons.report),
                    Icon(Icons.report_off),
                    Icon(Icons.save),
                    Icon(Icons.save_alt),
                    Icon(Icons.select_all),
                    Icon(Icons.send),
                    Icon(Icons.sort),
                    Icon(Icons.square_foot),
                    Icon(Icons.text_format),
                    Icon(Icons.unarchive),
                    Icon(Icons.undo),
                    Icon(Icons.waves),
                    Icon(Icons.weekend),
                    Icon(Icons.where_to_vote),
                  ],
                ),
              ),
              Center(
                child: GridView.count(
                  shrinkWrap: true,
                  crossAxisCount: 12,
                  children: [
                    Icon(Icons.add_rounded),
                    Icon(Icons.add_box_rounded),
                    Icon(Icons.add_circle_rounded),
                    Icon(Icons.add_circle_outline_rounded),
                    Icon(Icons.amp_stories_rounded),
                    Icon(Icons.archive_rounded),
                    Icon(Icons.backspace_rounded),
                    Icon(Icons.ballot_rounded),
                    Icon(Icons.biotech_rounded),
                    Icon(Icons.block_rounded),
                    Icon(Icons.calculate_rounded),
                    Container(), // Icon(Icons.change_circle_rounded),
                    Icon(Icons.clear_rounded),
                    Icon(Icons.content_copy_rounded),
                    Icon(Icons.content_cut_rounded),
                    Icon(Icons.content_paste_rounded),
                    Container(), // Icon(Icons.content_paste_off_rounded),
                    Container(), // Icon(Icons.copy_all_rounded),
                    Icon(Icons.create_rounded),
                    Icon(Icons.delete_sweep_rounded),
                    Icon(Icons.drafts_rounded),
                    Icon(Icons.dynamic_feed_rounded),
                    Icon(Icons.file_copy_rounded),
                    Icon(Icons.filter_list_rounded),
                    Icon(Icons.flag_rounded),
                    Icon(Icons.font_download_rounded),
                    Container(), // Icon(Icons.font_download_off_rounded),
                    Icon(Icons.forward_rounded),
                    Icon(Icons.gesture_rounded),
                    Icon(Icons.how_to_reg_rounded),
                    Icon(Icons.how_to_vote_rounded),
                    Icon(Icons.inbox_rounded),
                    Icon(Icons.insights_rounded),
                    Container(), // Icon(Icons.inventory_2_rounded),
                    Icon(Icons.link_rounded),
                    Icon(Icons.link_off_rounded),
                    Icon(Icons.low_priority_rounded),
                    Icon(Icons.mail_rounded),
                    Icon(Icons.markunread_rounded),
                    Icon(Icons.move_to_inbox_rounded),
                    Icon(Icons.next_week_rounded),
                    Icon(Icons.outlined_flag_rounded),
                    Icon(Icons.policy_rounded),
                    Icon(Icons.push_pin_rounded),
                    Icon(Icons.redo_rounded),
                    Icon(Icons.remove_rounded),
                    Icon(Icons.remove_circle_rounded),
                    Icon(Icons.remove_circle_outline_rounded),
                    Icon(Icons.reply_rounded),
                    Icon(Icons.reply_all_rounded),
                    Icon(Icons.report_rounded),
                    Icon(Icons.report_off_rounded),
                    Icon(Icons.save_rounded),
                    Icon(Icons.save_alt_rounded),
                    Icon(Icons.select_all_rounded),
                    Icon(Icons.send_rounded),
                    Icon(Icons.sort_rounded),
                    Icon(Icons.square_foot_rounded),
                    Icon(Icons.text_format_rounded),
                    Icon(Icons.unarchive_rounded),
                    Icon(Icons.undo_rounded),
                    Icon(Icons.waves_rounded),
                    Icon(Icons.weekend_rounded),
                    Icon(Icons.where_to_vote_rounded),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

nt4f04uNd · 2021-01-14T03:57:41Z

by the way is this ok that some of the filled icons even in web have very different appearance compared to all other styles? (i mean in general, in web)
some examples

filled on top, rounded on bottom

1

2

3

guidezpl · 2021-01-18T14:46:45Z

Thanks for the report! An upcoming font update should deal with the missing icons and style issue. For your general question about variants having a different look, let me get back to you

TahaTesser · 2021-02-24T11:31:33Z

According to #76684, restart_alt is also missing

guidezpl · 2021-03-04T14:35:25Z

I don't know, but https://fonts.google.com/icons was just launched so I'd go with that. I haven't forgotten about this issue, just need a few PRs to land before more work

nt4f04uNd · 2021-03-04T14:47:52Z

ok. i deleted my comment and moved it here, because it's off topic

guidezpl · 2021-03-16T10:54:10Z

The style question is with the icons team (b/176798798), who will update the icons as necessary. If they are updated, so will Flutter's. #78311 will fix all of the remaining issues.

mzdm · 2021-03-20T00:14:21Z

The style question is with the icons team (b/176798798), who will update the icons as necessary. If they are updated, so will Flutter's. #78311 will fix all of the remaining issues.

Would you please request to update the Google Fonts package as well? It's pretty outdated 👍
http://fonts.gstatic.com/s/f/directory002.pb

guidezpl · 2021-03-21T14:46:29Z

Best thing to do would be to file an issue at https://github.com/material-foundation/google-fonts-flutter/

mzdm · 2021-03-21T17:45:47Z

Best thing to do would be to file an issue at https://github.com/material-foundation/google-fonts-flutter/

There were already some issues mentioning missing fonts.. I have posted another one that groups them all. material-foundation/flutter-packages#158

github-actions · 2021-08-04T00:02:08Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

nt4f04uNd changed the title ~~Material Icons icons alternative styles are missing~~ Material icons alternative styles are missing Jan 2, 2021

guidezpl self-assigned this Jan 4, 2021

TahaTesser mentioned this issue Feb 24, 2021

Missing icon from material icons #76684

Closed

This was referenced Mar 9, 2021

[Fonts] Update material icons #76607

Merged

[Fonts] Update material icons #78311

Merged

guidezpl closed this as completed in #78311 Mar 25, 2021

github-actions bot locked as resolved and limited conversation to collaborators Aug 4, 2021

nt4f04uNd added the r: fixed Issue is closed as already fixed in a newer version label Jun 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Material icons alternative styles are missing #73223

Material icons alternative styles are missing #73223

nt4f04uNd commented Jan 2, 2021 •

edited

Loading

nt4f04uNd commented Jan 2, 2021

TahaTesser commented Jan 4, 2021 •

edited

Loading

guidezpl commented Jan 5, 2021

nt4f04uNd commented Jan 14, 2021 •

edited

Loading

nt4f04uNd commented Jan 14, 2021 •

edited

Loading

guidezpl commented Jan 18, 2021

TahaTesser commented Feb 24, 2021

guidezpl commented Mar 4, 2021

nt4f04uNd commented Mar 4, 2021

guidezpl commented Mar 16, 2021

mzdm commented Mar 20, 2021

guidezpl commented Mar 21, 2021

mzdm commented Mar 21, 2021

github-actions bot commented Aug 4, 2021

Material icons alternative styles are missing #73223

Material icons alternative styles are missing #73223

Comments

nt4f04uNd commented Jan 2, 2021 • edited Loading

nt4f04uNd commented Jan 2, 2021

TahaTesser commented Jan 4, 2021 • edited Loading

guidezpl commented Jan 5, 2021

nt4f04uNd commented Jan 14, 2021 • edited Loading

nt4f04uNd commented Jan 14, 2021 • edited Loading

guidezpl commented Jan 18, 2021

TahaTesser commented Feb 24, 2021

guidezpl commented Mar 4, 2021

nt4f04uNd commented Mar 4, 2021

guidezpl commented Mar 16, 2021

mzdm commented Mar 20, 2021

guidezpl commented Mar 21, 2021

mzdm commented Mar 21, 2021

github-actions bot commented Aug 4, 2021

nt4f04uNd commented Jan 2, 2021 •

edited

Loading

TahaTesser commented Jan 4, 2021 •

edited

Loading

nt4f04uNd commented Jan 14, 2021 •

edited

Loading

nt4f04uNd commented Jan 14, 2021 •

edited

Loading