{"id":1154,"date":"2023-10-14T15:00:10","date_gmt":"2023-10-14T15:00:10","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=1154"},"modified":"2023-10-26T15:05:10","modified_gmt":"2023-10-26T15:05:10","slug":"how-to-use-custom-icons-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/how-to-use-custom-icons-in-flutter\/","title":{"rendered":"How to use custom icons in Flutter?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"336\" src=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2023\/10\/image-19.png\" alt=\"\" class=\"wp-image-1155\" srcset=\"https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2023\/10\/image-19.png 640w, https:\/\/www.devopssupport.in\/blog\/wp-content\/uploads\/2023\/10\/image-19-300x158.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p>Create a folder for your custom icons in your Flutter project directory. For example, you could create a folder called&nbsp;<code>assets\/icons<\/code>.<\/p>\n\n\n\n<p>Add your custom icons to the folder. Your icons can be in PNG, SVG, or TTF format.<\/p>\n\n\n\n<p>Add the following code to your&nbsp;<code>pubspec.yaml<\/code>&nbsp;file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>flutter:\r\n  uses-material-design: true\r\n  assets:\r\n    - assets\/icons\/\r\n<\/code><\/pre>\n\n\n\n<p>Import the custom icons into your Dart code. For example, if you have a custom icon called\u00a0<code>my_icon.png<\/code>, you can import it as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\r\n\r\nclass MyClass extends StatelessWidget {\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return Image.asset('assets\/icons\/my_icon.png');\r\n  }\r\n}\r\n<\/code><\/pre>\n\n\n\n<p>Use the custom icons in your Flutter app like any other widget. For example, you can use the\u00a0<code>Image.asset()<\/code>\u00a0widget to display a custom icon, or you can use the\u00a0<code>Icon()<\/code>\u00a0widget to display a custom icon as a vector.<\/p>\n\n\n\n<p><strong>Example<\/strong><\/p>\n\n\n\n<p>The following example shows how to use a custom icon in a Flutter app:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\r\n\r\nclass MyClass extends StatelessWidget {\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return Scaffold(\r\n      appBar: AppBar(\r\n        title: Text('My App'),\r\n        leading: Icon(CustomIcons.my_icon),\r\n      ),\r\n      body: Center(\r\n        child: Image.asset('assets\/icons\/my_icon.png'),\r\n      ),\r\n    );\r\n  }\r\n}\r\n\r\nclass CustomIcons {\r\n  static const IconData my_icon = IconData(0xe900);\r\n}\r\n<\/code><\/pre>\n\n\n\n<p>This example will create a Flutter app with a custom icon in the app bar and in the body of the app.<\/p>\n\n\n\n<p><strong>Generating custom icons<\/strong><\/p>\n\n\n\n<p>If you don&#8217;t have any custom icons, you can use a variety of online tools to generate them. One popular tool is FlutterIcon.com. To use FlutterIcon.com, simply select the icons you want to use and click the &#8220;Download&#8221; button. FlutterIcon.com will generate a TTF file and a Dart file for your custom icons.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create a folder for your custom icons in your Flutter project directory. For example, you could create a folder called&nbsp;assets\/icons. Add your custom icons to the folder&#8230;. <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[454,229,455,453],"class_list":["post-1154","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-custom-icons","tag-flutter","tag-generating-custom-icons","tag-how-to-use-custom-icons-in-flutter"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=1154"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1154\/revisions"}],"predecessor-version":[{"id":1156,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1154\/revisions\/1156"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=1154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=1154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=1154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}