I'm a bit confused about how Flutter icons work. I thought there would be a directory of images somewhere containing the icons (thought I do recognize there are thousands of them). The Icons class simply contains a large list of static constant IconData variables and has no methods. Any use of icon in widgets have the type IconData.
My questions is how do Icons really work under the hood? Where in the flutter engine can I see exactly what's happening to turn that IconData into an image/shape (I don't know how the rendering works either)? I have no doubt other Flutter Material Design features work in the same way Icons do, so understanding this will probably answer other questions I’ll have in the near future.
Icons are glyphs in a special MaterialIcons font. They are installed in the SDK with the tool as described in https://github.com/flutter/flutter/wiki/Updating-Material-Design-Fonts-&-Icons.
Related
I was wondering if there was a way to render custom icons in Dart comment, just as Material and Cupertino icons are.
To give a little bit of context, the project I'm currently working on uses TablerIcons and I wasn't able to find a package up to date and I was about to make one. So I was wondering if there is a way to display icons in Dart comment, the same way Material and Cupertino Icons are.
For example, with the icon 10k this piece of code is used: <i class="material-icons md-36">10k</i> — material icon named "10k" which would give you something like this in vscode:
I tried different ways but couldn't make it work so I'm asking you guys if you have any ideas on how to do that, or if it's even possible.
Thanks.
I am aware of text=, but can’t figure out how to target icons (such as play_arrow) rather than letters.
Example: http://fonts.googleapis.com/css?family=Open+Sans:400&text=hello
Thanks for helping out.
I have recently started flutter. I am facing difficulty searching for appropriate icons whenever I want to use them. Is there any website or any source from where I can get the list of all the icons available for flutter?
Any help is much appreciated. Thank you in advance :)
Default Material Icons: https://api.flutter.dev/flutter/material/Icons-class.html
Flutter custom icons generator: https://www.fluttericon.com/
FontAwesomeIcons: https://pub.dev/packages/font_awesome_flutter
Icon Forest: https://pub.dev/packages/icon_forest
Icon Sax: https://pub.dev/packages/iconsax
Ion Icons: https://pub.dev/packages/ionicons
Unicons: https://pub.dev/packages/unicons
Line Icons: https://pub.dev/packages/line_icons
From the link below you have all Material Symbols and Icons from Google. No need to add a dependency as the standard Flutter lib includes them already:
https://fonts.google.com/icons?selected=Material+Icons
For example, the search icon is like this:
Icon(
Icons.search,
),
There is the ionicons too, a complete lib with 1.3K icons. And the list of them all is here: https://ionic.io/ionicons
Also, if you'd like to change the launcher icons a good place is the link below. You can design Android, iOS, web, macOS... icons super easy.
https://icon.kitchen/
Search 160k+ icons from all pub.dev packages https://pub.dev/packages/icon_forest
It contains most of the popular open-source icon libraries.
In addition to the above answers... you can find a pdf cheat sheet here if you want to print perhaps..
Material icons pdf cheatsheet
Flutter depending on the theme, by default comes with icons,...
Search Default Material:https://materialdesignicons.com/
I would like to know if there is a way to change the icon "type" in Flutter, not quite sure whats it called but i noticed that Flutter's material icon have different types, for examples:
Icons.done, Icons.done_rounded, Icons.done_sharp
So in this case the type is "rounded" and "sharp", and if i'm not mistaken using Icons.done will have a default type of "sharp".
So i was wondering if we can change the default icon type to "rounded", like changing the default icon size using theme data.
Well currently one of the ways is adding the additional _rounded to every icon in my Flutter project, but i'm a very lazy person you see. :) Anyone can help?
No, there is no default option to set your icons to 'rounded' they are different svg images and have a different name. It is not a setting like icon size.
Check out https://material.io/resources/icons/?style=baseline for the full Icons list.
There are also a lot of 3rd party icon libs on pub.dev. I use https://pub.dev/packages/mdi a lot.
I'm trying to build a map which allows users to choose icons for their geojson points. I just want to use the default map styles (streets|outdoors|light|dark|satellite) and Maki icons, however, not all icons are showing on all styles.
For example 'bicycle' and 'cafe' show on all the map styles, 'circle' only shows on satellite, and 'marker' doesn't show on any of them.
On a style I developed for another purpose, all markers show fine even though I know I didn't do anything special to 'add' them to the style.
So, my code is not the problem, my question is about the availability of maki icons on the default styles. I would have thought they'd all be available on all styles, but it seems not.
How can I tell which icons will work across all the default styles (short of trial and error)?
Is there some way I can 'enable' all the icons on a style?
Failing that, if I do have to make my own versions of the basic styles, I guess I can, but how do I ensure all the icons are loaded into the style?
The standard Mapbox styles are fairly optimised, and don't include anything that's not needed to display them. So, icons that aren't used in the style itself aren't included.
When you create a new style, I think Mapbox by default includes the whole Maki set.
If you can modify the style file (JSON) directly, you could try changing this line (for the Mapbox Streets style):
"sprite": "mapbox://sprites/mapbox/streets-v9",
to the equivalent in one of your custom styles, something like:
sprite": "mapbox://sprites/woowoowoo/htd32t6hd236t",
But it might cause problems if there are icons in Mapbox Streets that aren't in your style.
In short, I don't think there's a simple way to add "all the icons". Each style has its own set of icons.
A better way might be to use addImage/loadImage to load the custom icons you want, at run time. See this example.