Repository navigation
Support Material Symbols #102560
Description
Developer documentation
Design doc
To take into consideration:
- 3 separate variable fonts for outlined, rounded, and sharp styles
- advantages provided by using a variable font
- possibly not using
static consts
Related issues:
- automatic updating (Automatic Icons Updater for Flutter #83741)
- providing them in a package (Make Material Icons font a package #12569)
- better integration with IDEs (Use a more resilient mechanism for showing the icons on the Icons page #11073, Support icon previews in editors via the analysis server dart-lang/sdk#47667), could store data in https://github.com/flutter/tools_metadata
- Icons to Enum #104987
Activity
HansMuller commentedon Apr 26, 2022
CC @craiglabenz
guidezpl commentedon Apr 28, 2022
@DanTup @stevemessick
I have no clue as to how the Android Studio and VS Code icon integrations work so... In an ideal world, can you please describe what Material Symbol artifacts you'd like for integration in the IDEs?
Want to make sure I take this chance to improve / simplify processes and get rid of tech debt if possible.
DanTup commentedon Apr 28, 2022
@guidezpl currently I believe VS Code and Android Studio are doing slightly different things.
VS Code is using the data/image files from https://github.com/flutter/tools_metadata. We ship a copy of those icons inside the extension code (so they work offline), and we use regex to replace the HTML in the Flutter dartdocs (which relies on a CSS font we can't use) with markdown image tags for those images. We also locate icon references in code (using outline data) and insert icons in the gutter.
I'm less familiar with Android Studio, but I believe it may be extracting the images itself from the font icon itself rather than using those images.
There have been some discussions about moving more of this work into the analysis server, although it's not clear yet how that would work (would the server extract images from the font? could it support third party packages? how would it relate fields/enum values to each item). I'd definitely like to find a way to avoid shipping the icons in the extension (without them becoming broken image placeholders when offline), as with each release the number if icons climbs, and the Dart extension grows larger in size.
There's a related issue at dart-lang/sdk#47667.
stevemessick commentedon Apr 28, 2022
To support code completion of icon names, the IDEs need a class with a static variable for each named icon. The Flutter plugin gets them from tools_metadata. If you can add all the new icons to the existing
IconsandCupertinoIconsclasses then we won't have to change anything to support completion. Otherwise, we'll have to add checks for new classes in a couple places.As Danny said, the Flutter plugin for IntelliJ does have the ability to extract icons from a font, but there are reports that it does not work well, and can be slow. If you'd like to experiment, add your font package to the Flutter preferences and see if the new icons show up in the gutter. If that does not work (and even if it does, for safety I'd not rely on it), we'll plan to ship new icons with the Flutter plugin. We'd have to copy those from
tools_metadata.It might be good to create tracking issues in both the dart-code and flutter-intellij repos.
iapicca commentedon May 31, 2022
@guidezpl
what problems are caused by that?
(honest question, I thought
constare more efficient)guidezpl commentedon May 31, 2022
It makes migrating a huge pain. Imagine the look of all icons changes slightly because the icon font changes format (real issue). You need to be able to progressively migrate users (who have very precise screenshot tests), and thus have some time when you support both the old and new icons. If you think of a static constant as a pointer to a single spot in memory, you can see how that makes things harder.
28 remaining items
umardev500 commentedon Jan 10, 2025
unfortunately that package make my animation janky at first run
timmaffett commentedon Jan 10, 2025
@umardev500
Could you provide more information/context on your comment "unfortunately that package make my animation janky at first run" ?
The icons are implemented as fonts, which get tree-shaken to include only the glyphs (characters) used in your app, so rendering a icon is literally the same as rendering any character from any font... So I can't quite imagine how it could impact the performance of your app in any way?
umardev500 commentedon Jan 10, 2025
i just create the issue
issue
umardev500 commentedon Jan 10, 2025
when i use the package to use as ListTile for the showModalBottomShett
that firt run make janky
if i switch back to Icons class that worked well
this causing janky at first run:
MenuSheetItem( title: "Play Murratal", icon: Symbols.play_circle_outline_rounded, onTap: () {}, ),Swith back to standart Icons class:
MenuSheetItem( title: "Play Murratal", icon: Icons.play_circle_outline_rounded, onTap: () {}, ),and if i use standart icon class issue solved..
so the issue is jank or frame skipping at first run or first open the showModalBottomSheet when use that font i dont know why
muttsu-623 commentedon Mar 7, 2025
Is there any plan to make progress on this issue 👀 ?
"Material Symbols" is valuable, so I want the flutter team to support it officially.
JS-GitRepo commentedon Oct 1, 2025
I'm quite surprised "Icons()" is still the standard with Symbols still not having official support this many years after it becoming the new standard.
tomas-dorda commentedon Jan 19, 2026
Any progress? Would be great to have that working.
nagringapp commentedon Jan 19, 2026