Repository navigation
It's hard to use custom icons #3199
Description
Many, if not most, apps are likely to require custom icons. While it's simple enough to draw an image, some components (e.g. the IconButton) asks for an IconData and not a Widget.
I propose adding an extra, optional field to the IconData that specifies the font to use when drawing the icon. This would make it easy for developers to create a custom icon font and use custom icons.
Activity
Adds support for custom fonts for icons
Adds support for custom fonts for icons (#8880)
fablue commentedon May 10, 2017
But how can i get the codePoint from https://materialdesignicons.com ?
Hixie commentedon May 11, 2017
That's a question you'll have to ask them. Presumably it's documented somewhere, otherwise it's not clear how anyone could use their font (assuming they have a font).
Hixie commentedon May 11, 2017
Looks like the answer is on: https://cdn.materialdesignicons.com/1.9.32/
fablue commentedon May 11, 2017
Thank you very much 👍
BenSower commentedon Sep 13, 2017
For anyone coming here from google: I created a tutorial on how to add custom icons to your app: https://medium.com/@emv_tech/add-custom-font-icons-to-a-flutter-project-12bddb841d7
KaranChimple commentedon May 23, 2018
@BenSower I tried to work through your process but the problem I'm facing is that I already have a png file in assets folder and I want to include it. Iconmoon doesn't allow to upload png files. It says "Please choose SVG images, SVG fonts or JSONs exported by IcoMoon." Do you guys have any other solutions?
BenSower commentedon May 23, 2018
@KaranChimple I am not quite, but pretty sure you won't be able to use a png file like you would use a font-type file. You can however convert your png file to svg and then just convert it into a font: https://stackoverflow.com/questions/1861382/how-to-convert-a-png-image-to-a-svg
KaranChimple commentedon May 23, 2018
@BenSower Thanks. I found out a much better way to include png files. I used the following code:
IconButton(
icon: new Image.asset("assets/forward_button.png"),
iconSize: ht > wd ? ht * 0.08 : wd * 0.08,
onPressed: () {
Navigator.pop(context);
Navigator.pop(context);
Navigator.pop(context);
})
BenSower commentedon May 23, 2018
That is of course a way to use a png as an icon, but depending on the image, you might run into problems when scaling the image on larger/smaller devices, since png does not contain any vector information. If that is acceptable then you should be fine :-).
zoechi commentedon May 25, 2018
There is now also https://pub.dartlang.org/packages/flutter_svg
raveesh-me commentedon Oct 4, 2018
Now there is a package that does it for material design icons at least:
https://pub.dartlang.org/packages/material_design_icons_flutter
github-actions commentedon Aug 16, 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.