Repository navigation
How to use alternative themes of material icons #18384
Description
Google announced a bunch of updates to Material Guidelines during io2018. One of the updates is themes of material icons - https://material.io/tools/icons/
It now has "Filled", "Outlined", "Rounded", "Two-Tone", and "Sharp".
In Flutter, I know how to use regular icons which are "Filled" ones. I also know how I can add individual assets to the assets folder in Flutter app and use those in my code but I'd like if they were readily available so that you could use them like -
IconButton(
icon: Icon(Icons.volume_up), // <=== Point of interest here
tooltip: 'Increase volume by 10%',
onPressed: () { setState(() { _volume *= 1.1; }); },
)Looking at this repo I think it only supports default (Filled) right now but are there any plans to add other themes?
Probably
IconButton(
icon: Icon(Icons.volume_up, theme: IconTheme.outlined), // <=== Example
tooltip: 'Increase volume by 10%',
onPressed: () { setState(() { _volume *= 1.1; }); },
)
Activity
[-]How to use alternative variants of material icons[/-][+]How to use alternative themes of material icons[/+]zoechi commentedon Jun 12, 2018
@HansMuller
pgfepale commentedon Sep 17, 2018
Same question here... Need an outlined icon in a flutter.
lucaslcode commentedon Nov 6, 2018
I've made a package that lets you use the the 'outline' theme only: https://pub.dartlang.org/packages/outline_material_icons
Cretezy commentedon Nov 6, 2018
I believe this is how it would be best implemented:
Have new icons, such as
Icons.volume_up_outline, etc. This would make it simple to implement, make all existing tooling work (i.e.: icon in gutter in IDE), and make it clear which icons have other themes (I do not think every icon is implemented in all themes).I believe we would need to update the tooling for generating the icons to allow other fonts, like using
MaterialIconsOutline(instead of using the defaultMaterialIconsfont). That would be at https://github.com/flutter/flutter/blob/master/dev/tools/update_icons.dartWe also have a wiki page on editing the material fonts, which is a useful references: https://github.com/flutter/flutter/wiki/Updating-Material-Design-Fonts
The OP's proposal of using
IconThemewould conflict with https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/icon_theme.dartThinkDigitalSoftware commentedon Jan 10, 2019
Thank you, sir. Using this
lukepighetti commentedon Jan 31, 2019
I would like to see the following material icons packs. The default ones are starting to look dated. The new packs are quite compelling.
nt4f04uNd commentedon Sep 21, 2019
Ahem, it's september 2019, nothing is done about this???????
abbasnaqdi commentedon Sep 22, 2019
+1
willlarche commentedon Sep 27, 2019
Work is currently underway to bring this functionality and additional optimizations for icons. Can't give a release estimate so in the meanwhile, I'd continue to get the icons you need as png assets from material.io if you're blocked. But it's a current priority.
willlarche commentedon Apr 22, 2020
#54923 is last dependent PR. Then we will update the icon font and consts!
github-actions commentedon Aug 15, 2021
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 -vand a minimal reproduction of the issue.