I can see the "face_2" right here in the flutter MaterialIcon listing: https://api.flutter.dev/flutter/material/Icons/face_2-constant.html and https://api.flutter.dev/flutter/material/Icons-class.html, but when I try Icons.face_2, flutter can't find it.
I tried to use this code provided in the docs to get the corresponding IconData directly:
IconData(0xf085f, fontFamily: 'MaterialIcons')
It gave me an emoji.
I need flower and animal icons for an application. When I looked at Pub.dev, I couldn't find a package containing flower and animal icons. Can you give an idea about what I can do?
I looked at these packages but there are no flower and animal icons.
font_awesome_flutter: ^9.2.0
unicons: ^2.0.2
Material icons have some flower icons, but if you need something really specific you should use a SvgPicture, and download any SVG file.
Here is an example
SvgPicture.asset(
"assets/img/your-icon.svg",
height: 32,
width: 32,
color: Colors.black54,
),
To use this way you have to declare the assets folder in the pubspec.yaml and run a flutter pub get after that, an exampleenter code here:
flutter:
assets:
- assets/img/
Try using Flutter_Icons.
Add this in your Flutter page:
import 'package:flutter_icons/flutter_icons.dart';
IconButton(
icon: const Icon(FontAwesome5.cat), //Example
onPressed: () {},
)
And remember to add the package to your dependencies in your pubspec.yaml:
dependencies:
flutter_icons: ^1.1.0
I have an application composed of a number of different Dart and Flutter packages.
This has proven useful in that I've been able to move things like fonts, colours and Widgets into an independent style guide package which we can then use across all of our other applications.
Using custom fonts in a package works slightly differently in Flutter as we need to add the assets directory as a child of lib rather than a sibling:
…and then register these assets in pubspec.yaml like so:
assets:
- packages/receipt_widget/assets/fonts/my_font.ttf
// other asset declarations
This, for custom fonts and icons (png, jpg etc) works completely fine. My issue is that the same approach does not work for custom icon fonts.
Steps:
Generate custom icon font using IcoMoon or Flutter Icon
Place the generated font into the assets/fonts directory as demonstrated above
Place the generated dart file into the lib folder
Reference the custom icon in code and place into an Icon widget like so:
Icon(MyFontIcon.ic_heart);
For safety I then run flutter clean and uninstall the app from the device/ emulator before deploying a clean build.
I'm then left with a question mark rather than the referenced icon.
NB. the very same icons work correctly when used in a Flutter application directly rather than in a package.
To use your Flutter Icon font from a custom package, you can follow these steps:
(I repeated some of your steps already, for others who will find this issue)
create a flutter icon font
You can use flutter icon for that https://www.fluttericon.com
Put the file into your package
Make sure to copy the .ttf file into of the /lib folder.
NOT just assets, as you would do in your root project.
Example path:
/packages/my_awesome_fontpackage/lib/assets/MyIconFont.ttf
(see https://zubairehman.medium.com/how-to-use-custom-fonts-images-in-flutter-package-c2d9d4bfd47a )
Add the font to your project
Now open your package's pubspec.yaml file and add the font as an asset with package path:
flutter:
fonts:
- family: MyIconFont
fonts:
- asset: packages/my_awesome_fontpackage/assets/MyIconFont.ttf
(you might have to restart your app and bundling completely for the font to be loaded correctly and maybe run flutter clean just to be sure)
Now add package declaration to font dart file
Go into the my_icon_font.dart file and change the constant _kFontPkg there to your package name.
class MyIconFont {
MyIconFont._();
static const _kFontFam = 'MyIconFont';
static const String? _kFontPkg = 'my_awesome_fontpackage';
static const IconData bell = ...
....
}
I want to use flutter inbuilt icons as assets. So I want default location where all of flutter icons are located in flutter folder of flutter installation.
This would seem to imply that there's a fontFamily named 'MaterialIcons'. Not sure you can get it easily from any part of the Flutter distro, but https://material.io/resources/icons/ will show how to download or reference the font for your material designs.
static const IconData ac_unit_outlined = IconData(0xe005, fontFamily: 'MaterialIcons')
I don't think they are. If you look at the IconData class (https://api.flutter.dev/flutter/widgets/IconData-class.html). You will see that the description says 'A description of an icon fulfilled by a font glyph.'
Taking an example of one of the Icon values:
static const IconData list_alt = IconData(0xe81b, fontFamily: 'MaterialIcons');
I believe what that is telling us is that the Icon is being defined by the position 0xe81b in the Unicode font family called MaterialIcons
Not an answer to the original question, but likely tangentially helpful...
To visually identify & search/filter icons, both from the included MaterialIcons from Google and those created by the Community, check out:
https://materialdesignicons.com/
And to use them, the related pub.dev package for material_design_icons_flutter.
I am trying to complete this Flutter Code Lab, but the icons do not appear in my application. But they appears in Android Studio code:
I have been included the lib in my file pubspec.yaml
name: startup_namer
description: A new Flutter application.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.0
english_words: ^3.1.0
But result is this:
My main.dart file looks like this:
// Add the heart icons to the ListView.
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
.....
Widget _buildRow(WordPair pair) {
final bool alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
size: 22.0,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
}
I thought that is because I use iOS emulator, but when I tried with Android emulator the result was the same.
(Copied from the comments)
You need to set uses-material-design: true in pubspec.yaml for the icons to be included in the app.
In my case, I have written uses-material-design: true in pubspec.yaml file. I am able to solve this problem by restarting the Android emulator. You can also try by uninstalling old build from your emulator and then installing the new one.
This is little weird behavior, but it works for me.
Hot reloading does not show changes in resources. Press the stop button square red color in the top action menu bar of android studio and run the app again.
It works.
Please try:
Stopping the app
Running flutter clean in your app directory
Deleting the app from your simulator / emulator / device
Rebuild & Deploy the app.
If you are using the FlutterIcons library, make sure that your font-family in your pubspec.yaml matches the one declared in the my_flutter_app_icons.dart file.
I assume we're talking about the flutter_icons package?
I had to kill the app entirely and reinstall it and they started working for me. Not sure why a hot reload didn't do the trick.
Just delete the App from emulator/physical device on which you are working and again build the app.
It works for me and will surely works for you.
Add the following to your pubspec.yaml:
flutter:
uses-material-design: true
Took me a while to figure out based on the answers above that uses-material-design is a property of flutter, not of the root.
Icon changing to Chinese character was resolved by adding the correct path to the fonts folder. Specify, the correct path to your fonts folder by providing proper indentations:
Flutter Clean
Remove Build From your testing device/Emulator
Run the app
You need to set uses-material-design: true in pubspec.yaml for the icons to be included in the app.
Be sure to have a uses-material-design: true entry in the flutter section of your pubspec. yaml file. It allows you to use the predefined set of Material icons. Many Material Design widgets need to be inside of a MaterialApp to display properly, in order to inherit theme data.
this was issue for me
Make sure in pubspec.yaml file all the images and fonts have correct path and if you have added new image recently try to remove that and then rebuild
The icons were loading normally on all devices except android for me. To fix it I simply:
Before
Icon(
Icons.chevron_left,
size: 40.0,
color: Colors.white,
),
After
Icon(
MdiIcons.chevronLeft,
size: 40.0,
color: Colors.white,
),
Steps
Add to pubspec yahml
dependencies:
material_design_icons_flutter: ^4.0.5955
Add this to the file you want the icon
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
Instead of Icons.NameHere use MdiIcon.NameHere
if all the above not worked then run
flutter pub run flutter_launcher_icons:main
The problem started in my project when I included my app within GetMaterialApp instead of MaterialApp Widget. All Material icons started to look like [X].