{"id":77297,"date":"2024-08-29T16:51:56","date_gmt":"2024-08-29T09:51:56","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=77297"},"modified":"2024-08-29T16:51:56","modified_gmt":"2024-08-29T09:51:56","slug":"flutter-icon-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/","title":{"rendered":"Flutter icon: \u0110\u1ecbnh ngh\u0129a, Ph\u00e2n lo\u1ea1i v\u00e0 Chi ti\u1ebft c\u00e1ch \u00e1p d\u1ee5ng A-Z"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#Gioi_thieu_ve_Flutter_icon\" >Gi\u1edbi thi\u1ec7u v\u1ec1 Flutter icon\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#Su_dung_Flutter_de_quan_ly_icon\" >S\u1eed d\u1ee5ng Flutter \u0111\u1ec3 qu\u1ea3n l\u00fd icon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#Cac_loai_Flutter_icon\" >C\u00e1c lo\u1ea1i Flutter icon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#Cach_them_icon_trong_Flutter\" >C\u00e1ch th\u00eam icon trong Flutter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#Tuy_chinh_icon_trong_Flutter\" >T\u00f9y ch\u1ec9nh icon trong Flutter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#Cac_meo_va_luu_y_khi_lam_viec_voi_icon_trong_Flutter\" >C\u00e1c m\u1eb9o v\u00e0 l\u01b0u \u00fd khi l\u00e0m vi\u1ec7c v\u1edbi icon trong Flutter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#Cac_cau_hoi_thuong_gap_ve_Flutter_icon\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Flutter icon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#Tong_ket_Flutter_icon\" >T\u1ed5ng k\u1ebft Flutter icon<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>Flutter icon l\u00e0 m\u1ed9t trong nh\u1eefng y\u1ebfu t\u1ed1 quan tr\u1ecdng g\u00f3p ph\u1ea7n t\u1ea1o n\u00ean giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI) \u0111\u1eb9p m\u1eaft v\u00e0 chuy\u00ean nghi\u1ec7p cho c\u00e1c \u1ee9ng d\u1ee5ng Flutter. V\u1edbi kho th\u01b0 vi\u1ec7n icon phong ph\u00fa v\u00e0 \u0111a d\u1ea1ng, c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u00f9y ch\u1ec9nh v\u00e0 l\u1ef1a ch\u1ecdn icon ph\u00f9 h\u1ee3p \u0111\u1ec3 t\u1ea1o ra nh\u1eefng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng tuy\u1ec7t v\u1eddi. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u1edbi thi\u1ec7u chi ti\u1ebft v\u1ec1 Flutter icon, c\u00e1ch s\u1eed d\u1ee5ng v\u00e0 nh\u1eefng l\u01b0u \u00fd khi l\u1ef1a ch\u1ecdn icon.<\/strong><\/em><\/p>\n<p><b>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u th\u00eam v\u1ec1:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gi\u1edbi thi\u1ec7u v\u1ec1 Flutter icon<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c lo\u1ea1i icon trong Flutter<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch th\u00eam icon v\u00e0o d\u1ef1 \u00e1n Flutter<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u00f9y ch\u1ec9nh icon trong Flutter<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c m\u1eb9o v\u00e0 l\u01b0u \u00fd khi l\u00e0m vi\u1ec7c icon trong Flutter<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Gioi_thieu_ve_Flutter_icon\"><\/span><strong>Gi\u1edbi thi\u1ec7u v\u1ec1 Flutter icon\u00a0<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Flutter icon l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n quan tr\u1ecdng trong thi\u1ebft k\u1ebf giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI) c\u1ee7a \u1ee9ng d\u1ee5ng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Flutter icon gi\u00fap ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng nh\u1eadn di\u1ec7n c\u00e1c ch\u1ee9c n\u0103ng, h\u00e0nh \u0111\u1ed9ng ho\u1eb7c th\u00f4ng tin c\u1ee5 th\u1ec3 trong \u1ee9ng d\u1ee5ng m\u00e0 kh\u00f4ng c\u1ea7n d\u00f9ng \u0111\u1ebfn v\u0103n b\u1ea3n. Icon gi\u00fap t\u0103ng c\u01b0\u1eddng t\u00ednh th\u1ea9m m\u1ef9, c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng v\u00e0 t\u0103ng t\u00ednh tr\u1ef1c quan cho giao di\u1ec7n.<\/span><\/p>\n<p>B\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o c\u00e1c ngu\u1ed3n ch\u00ednh th\u1ee9c \u0111\u1ec3 th\u00f4ng tin th\u00eam v\u1ec1 Flutter icon:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/Icons-class.html\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Flutter Documentation<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/developers.google.com\/fonts\/docs\/material_icons\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Material Icons Guide<\/span><\/a><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Su_dung_Flutter_de_quan_ly_icon\"><\/span><b>S\u1eed d\u1ee5ng Flutter \u0111\u1ec3 qu\u1ea3n l\u00fd icon<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Flutter l\u00e0 m\u1ed9t framework ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng n\u1ed5i b\u1eadt, n\u1ed5i ti\u1ebfng v\u1edbi kh\u1ea3 n\u0103ng cung c\u1ea5p tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng m\u01b0\u1ee3t m\u00e0 v\u00e0 kh\u1ea3 n\u0103ng t\u00f9y ch\u1ec9nh cao. Khi s\u1eed d\u1ee5ng Flutter \u0111\u1ec3 qu\u1ea3n l\u00fd icon, b\u1ea1n s\u1ebd \u0111\u01b0\u1ee3c:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Kh\u1ea3 n\u0103ng t\u00f9y ch\u1ec9nh cao<\/b><span style=\"font-weight: 400;\">: Flutter cho ph\u00e9p b\u1ea1n d\u1ec5 d\u00e0ng t\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc, v\u00e0 h\u00ecnh d\u1ea1ng c\u1ee7a icon \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi phong c\u00e1ch thi\u1ebft k\u1ebf c\u1ee7a \u1ee9ng d\u1ee5ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Th\u01b0 vi\u1ec7n icon phong ph\u00fa<\/b><span style=\"font-weight: 400;\">: Flutter cung c\u1ea5p m\u1ed9t b\u1ed9 s\u01b0u t\u1eadp l\u1edbn c\u00e1c icon s\u1eb5n c\u00f3 th\u00f4ng qua c\u00e1c g\u00f3i nh\u01b0 <\/span><span style=\"font-weight: 400;\">Material Icons<\/span><span style=\"font-weight: 400;\"> v\u00e0 <\/span><span style=\"font-weight: 400;\">Cupertino Icons<\/span><span style=\"font-weight: 400;\">, gi\u00fap ti\u1ebft ki\u1ec7m th\u1eddi gian v\u00e0 c\u00f4ng s\u1ee9c khi c\u1ea7n s\u1eed d\u1ee5ng icon th\u00f4ng d\u1ee5ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Hi\u1ec7u su\u1ea5t t\u1ed1t<\/b><span style=\"font-weight: 400;\">: Flutter t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t hi\u1ec3n th\u1ecb icon, \u0111\u1ea3m b\u1ea3o r\u1eb1ng \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n lu\u00f4n m\u01b0\u1ee3t m\u00e0 v\u00e0 kh\u00f4ng b\u1ecb gi\u1eadt lag, ngay c\u1ea3 khi s\u1eed d\u1ee5ng nhi\u1ec1u icon.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>D\u1ec5 d\u00e0ng t\u00edch h\u1ee3p icon t\u00f9y ch\u1ec9nh<\/b><span style=\"font-weight: 400;\">: N\u1ebfu b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng icon ri\u00eang, Flutter h\u1ed7 tr\u1ee3 vi\u1ec7c t\u00edch h\u1ee3p icon t\u00f9y ch\u1ec9nh, cho ph\u00e9p b\u1ea1n s\u1eed d\u1ee5ng b\u1ea5t k\u1ef3 icon n\u00e0o m\u00e0 b\u1ea1n thi\u1ebft k\u1ebf ho\u1eb7c t\u1ea3i t\u1eeb b\u00ean ngo\u00e0i.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>H\u1ed7 tr\u1ee3 \u0111a n\u1ec1n t\u1ea3ng<\/b><span style=\"font-weight: 400;\">: Flutter cho ph\u00e9p ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng \u0111\u1ed3ng th\u1eddi tr\u00ean nhi\u1ec1u n\u1ec1n t\u1ea3ng nh\u01b0 Android, iOS, web v\u00e0 desktop. \u0110i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n qu\u1ea3n l\u00fd icon m\u1ed9t c\u00e1ch nh\u1ea5t qu\u00e1n tr\u00ean c\u00e1c n\u1ec1n t\u1ea3ng kh\u00e1c nhau m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i thay \u0111\u1ed5i m\u00e3 ngu\u1ed3n.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Cac_loai_Flutter_icon\"><\/span><strong>C\u00e1c lo\u1ea1i Flutter icon<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><strong>Material Icon<\/strong><\/h3>\n<p><b>\u0110\u1eb7c \u0111i\u1ec3m v\u00e0 \u01b0u \u0111i\u1ec3m<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u0110\u1eb7c \u0111i\u1ec3m:<\/b>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Material Icons l\u00e0 b\u1ed9 icon \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n b\u1edfi Google theo ti\u00eau chu\u1ea9n Material Design.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Bao g\u1ed3m h\u01a1n 1,000 icon v\u1edbi \u0111a d\u1ea1ng c\u00e1c ch\u1ee7 \u0111\u1ec1 v\u00e0 t\u00ecnh hu\u1ed1ng s\u1eed d\u1ee5ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 \u0111\u1ea7y \u0111\u1ee7 c\u00e1c bi\u1ebfn th\u1ec3 nh\u01b0 Filled, Outlined, Rounded, Two-Tone, v\u00e0 Sharp.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u01afu \u0111i\u1ec3m:<\/b>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">T\u00edch h\u1ee3p s\u1eb5n trong th\u01b0 vi\u1ec7n Flutter, d\u1ec5 d\u00e0ng s\u1eed d\u1ee5ng m\u00e0 kh\u00f4ng c\u1ea7n c\u00e0i \u0111\u1eb7t th\u00eam.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">T\u01b0\u01a1ng th\u00edch ho\u00e0n h\u1ea3o v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n Material Design kh\u00e1c trong Flutter.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">C\u1eadp nh\u1eadt th\u01b0\u1eddng xuy\u00ean v\u1edbi c\u00e1c icon m\u1edbi.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><b>C\u00e1ch s\u1eed d\u1ee5ng Material Icon<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import 'package:flutter\/material.dart';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">class MyHomePage extends StatelessWidget {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@override<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0Widget build(BuildContext context) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return Scaffold(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text('Material Icons Example'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0body: Center(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Icon(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Icons.favorite,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.red,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0size: 50.0,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">void main() =&gt; runApp(MaterialApp(home: MyHomePage()));<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u0110o\u1ea1n code tr\u00ean s\u1ebd t\u1ea1o ra m\u1ed9t \u1ee9ng d\u1ee5ng Flutter \u0111\u01a1n gi\u1ea3n v\u1edbi m\u1ed9t m\u00e0n h\u00ecnh ch\u00ednh (Home Page) nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li><b>AppBar<\/b><span style=\"font-weight: 400;\">: \u1ede tr\u00ean c\u00f9ng c\u1ee7a m\u00e0n h\u00ecnh, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t thanh ti\u00eau \u0111\u1ec1 v\u1edbi ch\u1eef &#8220;Material Icons Example&#8221;.<\/span><\/li>\n<li><b>Body<\/b><span style=\"font-weight: 400;\">: \u1ede gi\u1eefa m\u00e0n h\u00ecnh, m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim (icon h\u00ecnh tr\u00e1i tim) s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb. Bi\u1ec3u t\u01b0\u1ee3ng n\u00e0y s\u1ebd c\u00f3 m\u00e0u \u0111\u1ecf v\u00e0 k\u00edch th\u01b0\u1edbc l\u00e0 50.0.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">C\u1ee5 th\u1ec3:<\/span><\/p>\n<ul>\n<li><b>Icon<\/b><span style=\"font-weight: 400;\">: L\u00e0 m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim \u0111\u01b0\u1ee3c l\u1ea5y t\u1eeb b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng m\u1eb7c \u0111\u1ecbnh c\u1ee7a Flutter (<\/span><span style=\"font-weight: 400;\">Icons.favorite<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li><b>color: Colors.red<\/b><span style=\"font-weight: 400;\">: M\u00e0u s\u1eafc c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 m\u00e0u \u0111\u1ecf.<\/span><\/li>\n<li><b>size: 50.0<\/b><span style=\"font-weight: 400;\">: K\u00edch th\u01b0\u1edbc c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 50 pixel.<\/span><\/li>\n<\/ul>\n<p><b>Output<\/b><span style=\"font-weight: 400;\">: Khi b\u1ea1n ch\u1ea1y \u1ee9ng d\u1ee5ng n\u00e0y, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t m\u00e0n h\u00ecnh v\u1edbi bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim m\u00e0u \u0111\u1ecf \u1edf gi\u1eefa.<\/span><\/p>\n<h3><strong>Cupertino <\/strong>Icon<\/h3>\n<p><span style=\"font-weight: 400;\">Cupertino Icons l\u00e0 b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf theo phong c\u00e1ch c\u1ee7a iOS, ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c \u1ee9ng d\u1ee5ng ph\u00e1t tri\u1ec3n cho n\u1ec1n t\u1ea3ng iOS ho\u1eb7c khi mu\u1ed1n t\u1ea1o tr\u1ea3i nghi\u1ec7m gi\u1ed1ng nh\u01b0 iOS.<\/span><\/p>\n<p><b>\u01afu \u0111i\u1ec3m<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Phong c\u00e1ch iOS: Ph\u00f9 h\u1ee3p cho c\u00e1c \u1ee9ng d\u1ee5ng ph\u00e1t tri\u1ec3n cho n\u1ec1n t\u1ea3ng iOS ho\u1eb7c khi b\u1ea1n mu\u1ed1n t\u1ea1o tr\u1ea3i nghi\u1ec7m gi\u1ed1ng nh\u01b0 iOS.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">D\u1ec5 s\u1eed d\u1ee5ng: T\u00edch h\u1ee3p s\u1eb5n trong Flutter, kh\u00f4ng c\u1ea7n c\u00e0i \u0111\u1eb7t th\u00eam th\u01b0 vi\u1ec7n.<\/span><\/li>\n<\/ul>\n<p><b>Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">H\u1ea1n ch\u1ebf v\u1ec1 phong c\u00e1ch: Ch\u1ec9 ph\u00f9 h\u1ee3p v\u1edbi thi\u1ebft k\u1ebf theo phong c\u00e1ch iOS.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kh\u00f4ng phong ph\u00fa b\u1eb1ng Font Awesome: \u00cdt \u0111a d\u1ea1ng h\u01a1n so v\u1edbi c\u00e1c b\u1ed9 icon kh\u00e1c.<\/span><\/li>\n<\/ul>\n<p><b>\u0110\u1eb7c \u0111i\u1ec3m<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Thi\u1ebft k\u1ebf tinh t\u1ebf: \u0110\u01b0\u1ee3c thi\u1ebft k\u1ebf theo phong c\u00e1ch iOS, v\u1edbi c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng th\u01b0\u1eddng th\u1ea5y tr\u00ean h\u1ec7 \u0111i\u1ec1u h\u00e0nh n\u00e0y.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u00edch h\u1ee3p s\u1eb5n: Kh\u00f4ng c\u1ea7n c\u00e0i \u0111\u1eb7t th\u00eam th\u01b0 vi\u1ec7n ngo\u00e0i.<\/span><\/li>\n<\/ul>\n<p><b>C\u00e1ch s\u1eed d\u1ee5ng Cupertino Icon<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import 'package:flutter\/cupertino.dart';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">class MyHomePage extends StatelessWidget {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@override<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0Widget build(BuildContext context) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return CupertinoPageScaffold(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0navigationBar: CupertinoNavigationBar(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0middle: Text('Cupertino Icons Example'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0child: Center(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Icon(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0CupertinoIcons.heart_fill,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: CupertinoColors.systemRed,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0size: 50.0,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}\r\n<\/span>\r\n<span style=\"font-weight: 400;\">void main() =&gt; runApp(CupertinoApp(home: MyHomePage()));<\/span><\/pre>\n<p><b>Output c\u1ee7a \u0111o\u1ea1n code<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Khi ch\u1ea1y \u0111o\u1ea1n code n\u00e0y, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t giao di\u1ec7n \u1ee9ng d\u1ee5ng v\u1edbi phong c\u00e1ch gi\u1ed1ng nh\u01b0 tr\u00ean iOS, bao g\u1ed3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>CupertinoNavigationBar<\/b><span style=\"font-weight: 400;\">: Thanh \u0111i\u1ec1u h\u01b0\u1edbng \u1edf tr\u00ean c\u00f9ng m\u00e0n h\u00ecnh, v\u1edbi ti\u00eau \u0111\u1ec1 l\u00e0 &#8220;Cupertino Icons Example&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Body<\/b><span style=\"font-weight: 400;\">: \u1ede gi\u1eefa m\u00e0n h\u00ecnh, m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim (icon h\u00ecnh tr\u00e1i tim) s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb. Bi\u1ec3u t\u01b0\u1ee3ng n\u00e0y s\u1ebd c\u00f3 m\u00e0u \u0111\u1ecf v\u00e0 k\u00edch th\u01b0\u1edbc l\u00e0 50.0.<\/span><\/li>\n<\/ul>\n<p><b>Gi\u1ea3i th\u00edch chi ti\u1ebft<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>CupertinoPageScaffold<\/b><span style=\"font-weight: 400;\">: \u0110\u00e2y l\u00e0 m\u1ed9t scaffold d\u00e0nh ri\u00eang cho iOS, cung c\u1ea5p b\u1ed1 c\u1ee5c c\u01a1 b\u1ea3n cho c\u00e1c trang iOS, bao g\u1ed3m thanh \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0 n\u1ed9i dung ch\u00ednh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>CupertinoNavigationBar<\/b><span style=\"font-weight: 400;\">: Thanh \u0111i\u1ec1u h\u01b0\u1edbng iOS \u1edf tr\u00ean c\u00f9ng c\u1ee7a trang, v\u1edbi ti\u00eau \u0111\u1ec1 \u0111\u01b0\u1ee3c \u0111\u1eb7t \u1edf gi\u1eefa (<\/span><span style=\"font-weight: 400;\">middle: Text(&#8216;Cupertino Icons Example&#8217;)<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Center<\/b><span style=\"font-weight: 400;\">: Widget n\u00e0y c\u0103n gi\u1eefa n\u1ed9i dung con c\u1ee7a n\u00f3, trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Icon<\/b><span style=\"font-weight: 400;\">: Widget \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng, \u1edf \u0111\u00e2y l\u00e0 bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim \u0111\u01b0\u1ee3c \u0111i\u1ec1n \u0111\u1ea7y (<\/span><span style=\"font-weight: 400;\">CupertinoIcons.heart_fill<\/span><span style=\"font-weight: 400;\">).<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>color: CupertinoColors.systemRed<\/b><span style=\"font-weight: 400;\">: M\u00e0u c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 m\u00e0u \u0111\u1ecf h\u1ec7 th\u1ed1ng tr\u00ean iOS.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>size: 50.0<\/b><span style=\"font-weight: 400;\">: K\u00edch th\u01b0\u1edbc c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 50 pixel.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>CupertinoApp<\/b><span style=\"font-weight: 400;\">: Widget kh\u1edfi ch\u1ea1y \u1ee9ng d\u1ee5ng v\u1edbi c\u00e1c y\u1ebfu t\u1ed1 UI theo phong c\u00e1ch iOS.<\/span><\/li>\n<\/ul>\n<h3><strong>Custom Icon<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Custom Icons cho ph\u00e9p b\u1ea1n t\u1ea1o v\u00e0 s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh, ph\u00f9 h\u1ee3p v\u1edbi thi\u1ebft k\u1ebf v\u00e0 th\u01b0\u01a1ng hi\u1ec7u ri\u00eang c\u1ee7a b\u1ea1n. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng h\u00ecnh \u1ea3nh nh\u01b0 SVG, PNG ho\u1eb7c c\u00e1c t\u1ec7p \u0111\u1ed3 h\u1ecda kh\u00e1c.<\/span><\/p>\n<p><b>\u01afu \u0111i\u1ec3m<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u00f9y ch\u1ec9nh cao: B\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o bi\u1ec3u t\u01b0\u1ee3ng ho\u00e0n to\u00e0n theo \u00fd mu\u1ed1n, ph\u00f9 h\u1ee3p v\u1edbi thi\u1ebft k\u1ebf c\u00e1 nh\u00e2n ho\u1eb7c th\u01b0\u01a1ng hi\u1ec7u.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110a d\u1ea1ng \u0111\u1ecbnh d\u1ea1ng: C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng nhi\u1ec1u \u0111\u1ecbnh d\u1ea1ng kh\u00e1c nhau nh\u01b0 SVG, PNG.<\/span><\/li>\n<\/ul>\n<p><b>Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Qu\u00e1 tr\u00ecnh t\u00edch h\u1ee3p ph\u1ee9c t\u1ea1p: C\u00f3 th\u1ec3 c\u1ea7n th\u00eam c\u00f4ng s\u1ee9c \u0111\u1ec3 thi\u1ebft l\u1eadp v\u00e0 \u0111\u1ea3m b\u1ea3o ho\u1ea1t \u0111\u1ed9ng \u0111\u00fang c\u00e1ch.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u0103ng k\u00edch th\u01b0\u1edbc \u1ee9ng d\u1ee5ng: C\u00f3 th\u1ec3 l\u00e0m t\u0103ng k\u00edch th\u01b0\u1edbc \u1ee9ng d\u1ee5ng n\u1ebfu s\u1eed d\u1ee5ng nhi\u1ec1u h\u00ecnh \u1ea3nh ho\u1eb7c t\u1ec7p SVG l\u1edbn.<\/span><\/li>\n<\/ul>\n<p><b>\u0110\u1eb7c \u0111i\u1ec3m<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Thi\u1ebft k\u1ebf t\u00f9y ch\u1ec9nh: Cho ph\u00e9p thi\u1ebft k\u1ebf c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng \u0111\u1ed9c \u0111\u00e1o v\u00e0 ph\u00f9 h\u1ee3p v\u1edbi th\u01b0\u01a1ng hi\u1ec7u ho\u1eb7c giao di\u1ec7n c\u1ee5 th\u1ec3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 nhi\u1ec1u \u0111\u1ecbnh d\u1ea1ng: C\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c \u0111\u1ecbnh d\u1ea1ng h\u00ecnh \u1ea3nh nh\u01b0 PNG, SVG ho\u1eb7c c\u00e1c t\u1ec7p \u0111\u1ed3 h\u1ecda kh\u00e1c.<\/span><\/li>\n<\/ul>\n<p><strong>S\u1eed d\u1ee5ng Custom Icon trong Flutter<\/strong><\/p>\n<pre><span style=\"font-weight: 400;\">import 'package:flutter\/material.dart';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">class MyHomePage extends StatelessWidget {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@override<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0Widget build(BuildContext context) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return Scaffold(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text('Custom Icons Example'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0body: Center(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Icon(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0IconData(0xe900, fontFamily: 'CustomIcons'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.blue,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0size: 50.0,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">void main() =&gt; runApp(MaterialApp(home: MyHomePage()));<\/span><\/pre>\n<p><b>Output c\u1ee7a \u0111o\u1ea1n code<\/b><\/p>\n<p>Khi ch\u1ea1y \u0111o\u1ea1n code n\u00e0y, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t \u1ee9ng d\u1ee5ng v\u1edbi giao di\u1ec7n nh\u01b0 sau:<\/p>\n<ul>\n<li><b>AppBar: <\/b>M\u1ed9t thanh ti\u00eau \u0111\u1ec1 \u1edf tr\u00ean c\u00f9ng m\u00e0n h\u00ecnh, hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n &#8220;Custom Icons Example&#8221;.<\/li>\n<li><b>Body:<\/b> \u1ede gi\u1eefa m\u00e0n h\u00ecnh, m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb. Bi\u1ec3u t\u01b0\u1ee3ng n\u00e0y c\u00f3 m\u00e0u xanh d\u01b0\u01a1ng v\u00e0 k\u00edch th\u01b0\u1edbc l\u00e0 50.0 pixel.<\/li>\n<\/ul>\n<p><b>Gi\u1ea3i th\u00edch chi ti\u1ebft:<\/b><\/p>\n<ul>\n<li><b>IconData<\/b><b>: <\/b>\u0110\u00e2y l\u00e0 m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng trong Flutter d\u00f9ng \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh. Trong \u0111o\u1ea1n code n\u00e0y, 0xe900 l\u00e0 m\u00e3 \u0111i\u1ec3m m\u00e3 Unicode c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng, v\u00e0 fontFamily: &#8216;CustomIcons&#8217; x\u00e1c \u0111\u1ecbnh r\u1eb1ng bi\u1ec3u t\u01b0\u1ee3ng n\u00e0y thu\u1ed9c v\u1ec1 m\u1ed9t b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh c\u00f3 t\u00ean l\u00e0 &#8216;CustomIcons&#8217;.<\/li>\n<li><b>color: <\/b>Colors.blue: M\u00e0u c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 m\u00e0u xanh d\u01b0\u01a1ng.<\/li>\n<li><b>size: <\/b>50.0: K\u00edch th\u01b0\u1edbc c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 50 pixel.<\/li>\n<li><b>Scaffold<\/b><b>: <\/b>Cung c\u1ea5p c\u1ea5u tr\u00fac b\u1ed1 c\u1ee5c cho \u1ee9ng d\u1ee5ng, bao g\u1ed3m thanh ti\u00eau \u0111\u1ec1 (AppBar) v\u00e0 n\u1ed9i dung ch\u00ednh (body).<\/li>\n<li><b>AppBar<\/b><b>: <\/b>Thanh ti\u00eau \u0111\u1ec1 \u1edf \u0111\u1ea7u m\u00e0n h\u00ecnh v\u1edbi v\u0103n b\u1ea3n &#8220;Custom Icons Example&#8221;.<\/li>\n<li><b>Center<\/b><b>: <\/b>Widget n\u00e0y c\u0103n gi\u1eefa bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh trong m\u00e0n h\u00ecnh.<\/li>\n<li><b>MaterialApp<\/b><b>: <\/b>Widget bao b\u1ecdc to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng, cung c\u1ea5p c\u00e1c t\u00ednh n\u0103ng nh\u01b0 ch\u1ee7 \u0111\u1ec1 (theme) v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng.<\/li>\n<\/ul>\n<h3><b>Font Awesome Icon<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Font Awesome l\u00e0 m\u1ed9t b\u1ed9 icon ph\u1ed5 bi\u1ebfn v\u00e0 \u0111a d\u1ea1ng, cung c\u1ea5p h\u00e0ng ng\u00e0n bi\u1ec3u t\u01b0\u1ee3ng kh\u00e1c nhau cho nhi\u1ec1u m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng, t\u1eeb m\u1ea1ng x\u00e3 h\u1ed9i \u0111\u1ebfn c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng c\u00f4ng ngh\u1ec7.<\/span><\/p>\n<p><b>\u01afu \u0111i\u1ec3m<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110a d\u1ea1ng: Cung c\u1ea5p h\u00e0ng ng\u00e0n bi\u1ec3u t\u01b0\u1ee3ng kh\u00e1c nhau, ph\u00f9 h\u1ee3p v\u1edbi nhi\u1ec1u thi\u1ebft k\u1ebf v\u00e0 nhu c\u1ea7u kh\u00e1c nhau.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Kh\u1ea3 n\u0103ng m\u1edf r\u1ed9ng: C\u00e1c icon l\u00e0 vector, c\u00f3 th\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc m\u00e0 kh\u00f4ng l\u00e0m gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng.<\/span><\/li>\n<\/ul>\n<p><b>Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u1ea7n th\u00eam th\u01b0 vi\u1ec7n: C\u1ea7n c\u00e0i \u0111\u1eb7t th\u01b0 vi\u1ec7n font_awesome_flutter, c\u00f3 th\u1ec3 l\u00e0m t\u0103ng k\u00edch th\u01b0\u1edbc \u1ee9ng d\u1ee5ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 g\u00e2y xung \u0111\u1ed9t: S\u1eed d\u1ee5ng nhi\u1ec1u b\u1ed9 icon c\u00f3 th\u1ec3 g\u00e2y xung \u0111\u1ed9t v\u1ec1 t\u00ean v\u00e0 m\u00e0u s\u1eafc.<\/span><\/li>\n<\/ul>\n<p><b>\u0110\u1eb7c \u0111i\u1ec3m<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">B\u1ed9 s\u01b0u t\u1eadp phong ph\u00fa: Cung c\u1ea5p nhi\u1ec1u bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb c\u00e1c l\u0129nh v\u1ef1c kh\u00e1c nhau nh\u01b0 m\u1ea1ng x\u00e3 h\u1ed9i, c\u00f4ng ngh\u1ec7, v\u00e0 c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng \u0111\u1eb7c tr\u01b0ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc v\u00e0 k\u00edch th\u01b0\u1edbc: C\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng \u0111i\u1ec1u ch\u1ec9nh theo nhu c\u1ea7u thi\u1ebft k\u1ebf.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">C\u00e1c lo\u1ea1i icon trong Flutter cung c\u1ea5p nhi\u1ec1u l\u1ef1a ch\u1ecdn linh ho\u1ea1t, gi\u00fap b\u1ea1n thi\u1ebft k\u1ebf giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng phong ph\u00fa v\u00e0 tr\u1ef1c quan. T\u00f9y thu\u1ed9c v\u00e0o nhu c\u1ea7u v\u00e0 thi\u1ebft k\u1ebf c\u1ee7a d\u1ef1 \u00e1n, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ecdn lo\u1ea1i icon ph\u00f9 h\u1ee3p \u0111\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c hi\u1ec7u qu\u1ea3 t\u1ed1i \u01b0u.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cach_them_icon_trong_Flutter\"><\/span><strong>C\u00e1ch th\u00eam icon trong Flutter<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>C\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng package flutter_icons<\/b><\/h3>\n<p><span style=\"font-weight: 400;\"><strong>B\u01b0\u1edbc 1:<\/strong> M\u1edf file <\/span><span style=\"font-weight: 400;\">pubspec.yaml<\/span><span style=\"font-weight: 400;\"> c\u1ee7a d\u1ef1 \u00e1n Flutter.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>B\u01b0\u1edbc 2:<\/strong> Th\u00eam d\u00f2ng sau v\u00e0o ph\u1ea7n dependencies:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">dependencies<\/span>\r\n\u00a0 flutter_icons: ^1.0.0<\/pre>\n<p><span style=\"font-weight: 400;\"><strong>B\u01b0\u1edbc 3:<\/strong> Ch\u1ea1y l\u1ec7nh <\/span><span style=\"font-weight: 400;\">flutter pub get<\/span><span style=\"font-weight: 400;\"> \u0111\u1ec3 c\u00e0i \u0111\u1eb7t package.<\/span><\/p>\n<p><strong>V\u00ed d\u1ee5 c\u01a1 b\u1ea3n:<\/strong><\/p>\n<pre><span style=\"font-weight: 400;\">import 'package:flutter\/material.dart';<\/span>\r\n<span style=\"font-weight: 400;\">import 'package:flutter_icons\/flutter_icons.dart';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">void main() =&gt; runApp(MyApp());<\/span>\r\n\r\n<span style=\"font-weight: 400;\">class MyApp extends StatelessWidget {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@override<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0Widget build(BuildContext context) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return MaterialApp(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0home: Scaffold(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text('Icon Example'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: Center(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Icon(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0FlutterIcons.home_ant, \/\/ S\u1eed d\u1ee5ng icon t\u1eeb flutter_icons<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0size: 50.0,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.blue,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><b>Output c\u1ee7a \u0111o\u1ea1n code<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Khi ch\u1ea1y \u0111o\u1ea1n code n\u00e0y, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t \u1ee9ng d\u1ee5ng Flutter v\u1edbi giao di\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: M\u1ed9t thanh ti\u00eau \u0111\u1ec1 \u1edf tr\u00ean c\u00f9ng m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n &#8220;Icon Example&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Body<\/b><span style=\"font-weight: 400;\">: \u1ede gi\u1eefa m\u00e0n h\u00ecnh, m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng h\u00ecnh ng\u00f4i nh\u00e0 (<\/span><span style=\"font-weight: 400;\">home<\/span><span style=\"font-weight: 400;\">) t\u1eeb b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng Ant Design s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb. Bi\u1ec3u t\u01b0\u1ee3ng n\u00e0y c\u00f3 m\u00e0u xanh d\u01b0\u01a1ng v\u00e0 k\u00edch th\u01b0\u1edbc l\u00e0 50.0 pixel.<\/span><\/li>\n<\/ul>\n<p><b>Gi\u1ea3i th\u00edch chi ti\u1ebft<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>flutter_icons<\/b><span style=\"font-weight: 400;\">: L\u00e0 m\u1ed9t g\u00f3i Flutter cung c\u1ea5p c\u00e1c b\u1ed9 s\u01b0u t\u1eadp bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb nhi\u1ec1u ngu\u1ed3n kh\u00e1c nhau, bao g\u1ed3m FontAwesome, Material Icons, Ant Design, v\u00e0 nhi\u1ec1u h\u01a1n n\u1eefa.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>FlutterIcons.home_ant<\/b><span style=\"font-weight: 400;\">: \u0110\u00e2y l\u00e0 c\u00e1ch truy c\u1eadp bi\u1ec3u t\u01b0\u1ee3ng <\/span><span style=\"font-weight: 400;\">home<\/span><span style=\"font-weight: 400;\"> t\u1eeb b\u1ed9 s\u01b0u t\u1eadp Ant Design trong g\u00f3i <\/span><span style=\"font-weight: 400;\">flutter_icons<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>size: 50.0<\/b><span style=\"font-weight: 400;\">: K\u00edch th\u01b0\u1edbc c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 50 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color: Colors.blue<\/b><span style=\"font-weight: 400;\">: M\u00e0u c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 m\u00e0u xanh d\u01b0\u01a1ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scaffold<\/b><span style=\"font-weight: 400;\">: Cung c\u1ea5p c\u1ea5u tr\u00fac b\u1ed1 c\u1ee5c cho \u1ee9ng d\u1ee5ng, bao g\u1ed3m thanh ti\u00eau \u0111\u1ec1 (<\/span><span style=\"font-weight: 400;\">AppBar<\/span><span style=\"font-weight: 400;\">) v\u00e0 n\u1ed9i dung ch\u00ednh (<\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: Thanh ti\u00eau \u0111\u1ec1 \u1edf \u0111\u1ea7u m\u00e0n h\u00ecnh v\u1edbi v\u0103n b\u1ea3n &#8220;Icon Example&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Center<\/b><span style=\"font-weight: 400;\">: Widget n\u00e0y c\u0103n gi\u1eefa bi\u1ec3u t\u01b0\u1ee3ng trong m\u00e0n h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>MaterialApp<\/b><span style=\"font-weight: 400;\">: Widget bao b\u1ecdc to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng, cung c\u1ea5p c\u00e1c t\u00ednh n\u0103ng nh\u01b0 ch\u1ee7 \u0111\u1ec1 (theme) v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 tr\u00ean, icon &#8220;home&#8221; t\u1eeb th\u01b0 vi\u1ec7n <\/span><span style=\"font-weight: 400;\">flutter_icons<\/span><span style=\"font-weight: 400;\"> \u0111\u00e3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u00e0 hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh.<\/span><\/p>\n<h3><strong>S\u1eed d\u1ee5ng icon t\u1eeb c\u00e1c g\u00f3i b\u00ean ngo\u00e0i<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i th\u01b0 vi\u1ec7n icon m\u1eb7c \u0111\u1ecbnh, b\u1ea1n c\u00f2n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c g\u00f3i icon t\u1eeb b\u00ean ngo\u00e0i \u0111\u1ec3 l\u00e0m phong ph\u00fa th\u00eam b\u1ed9 s\u01b0u t\u1eadp icon c\u1ee7a m\u00ecnh. M\u1ed9t s\u1ed1 g\u00f3i icon ph\u1ed5 bi\u1ebfn bao g\u1ed3m font_awesome_flutter v\u00e0 line_awesome_flutter.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Gi\u1edbi thi\u1ec7u m\u1ed9t s\u1ed1 g\u00f3i icon ph\u1ed5 bi\u1ebfn:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">font_awesome_flutter: Cung c\u1ea5p h\u01a1n 1500 icon t\u1eeb Font Awesome.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">line_awesome_flutter: Cung c\u1ea5p b\u1ed9 icon \u0111\u1eb9p m\u1eaft t\u1eeb Line Awesome.<\/span><\/li>\n<\/ul>\n<p><b>C\u00e1ch c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng:<\/b><\/p>\n<p><span style=\"font-weight: 400;\"><strong>B\u01b0\u1edbc 1:<\/strong> M\u1edf file pubspec.yaml c\u1ee7a d\u1ef1 \u00e1n Flutter.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>B\u01b0\u1edbc 2:<\/strong> Th\u00eam c\u00e1c d\u00f2ng sau v\u00e0o ph\u1ea7n dependencies:<\/span><\/p>\n<pre>dependencies:\r\n  font_awesome_flutter: ^10.0.0\r\n  line_awesome_flutter: ^1.0.0<\/pre>\n<p><span style=\"font-weight: 400;\"><strong>B\u01b0\u1edbc 3:<\/strong> Ch\u1ea1y l\u1ec7nh <\/span><span style=\"font-weight: 400;\">flutter pub get<\/span><span style=\"font-weight: 400;\"> \u0111\u1ec3 c\u00e0i \u0111\u1eb7t c\u00e1c g\u00f3i icon.<\/span><\/p>\n<p><b>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng Font Awesome:<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">import 'package:flutter\/material.dart';<\/span>\r\n<span style=\"font-weight: 400;\">import 'package:font_awesome_flutter\/font_awesome_flutter.dart';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">void main() =&gt; runApp(MyApp());<\/span>\r\n\r\n<span style=\"font-weight: 400;\">class MyApp extends StatelessWidget {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@override<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0Widget build(BuildContext context) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return MaterialApp(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0home: Scaffold(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text('Font Awesome Icon Example'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: Center(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: FaIcon(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0FontAwesomeIcons.thumbsUp, \/\/ S\u1eed d\u1ee5ng icon t\u1eeb font_awesome_flutter<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0size: 50.0,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.green,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><b>Output c\u1ee7a \u0111o\u1ea1n code<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Khi ch\u1ea1y \u0111o\u1ea1n code n\u00e0y, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t \u1ee9ng d\u1ee5ng Flutter v\u1edbi giao di\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: M\u1ed9t thanh ti\u00eau \u0111\u1ec1 \u1edf tr\u00ean c\u00f9ng m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n &#8220;Font Awesome Icon Example&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Body<\/b><span style=\"font-weight: 400;\">: \u1ede gi\u1eefa m\u00e0n h\u00ecnh, m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng ng\u00f3n tay c\u00e1i gi\u01a1 l\u00ean (<\/span><span style=\"font-weight: 400;\">thumbs up<\/span><span style=\"font-weight: 400;\">) t\u1eeb b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng FontAwesome s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb. Bi\u1ec3u t\u01b0\u1ee3ng n\u00e0y c\u00f3 m\u00e0u xanh l\u00e1 c\u00e2y v\u00e0 k\u00edch th\u01b0\u1edbc l\u00e0 50.0 pixel.<\/span><\/li>\n<\/ul>\n<p><b>Gi\u1ea3i th\u00edch chi ti\u1ebft<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font_awesome_flutter<\/b><span style=\"font-weight: 400;\">: \u0110\u00e2y l\u00e0 m\u1ed9t g\u00f3i Flutter cung c\u1ea5p kh\u1ea3 n\u0103ng s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb b\u1ed9 s\u01b0u t\u1eadp FontAwesome, r\u1ea5t ph\u1ed5 bi\u1ebfn v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ed9ng r\u00e3i trong c\u00e1c \u1ee9ng d\u1ee5ng web v\u00e0 di \u0111\u1ed9ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>FaIcon<\/b><span style=\"font-weight: 400;\">: L\u00e0 m\u1ed9t widget \u0111\u1eb7c bi\u1ec7t \u0111\u01b0\u1ee3c cung c\u1ea5p b\u1edfi g\u00f3i <\/span><span style=\"font-weight: 400;\">font_awesome_flutter<\/span><span style=\"font-weight: 400;\"> \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng FontAwesome trong Flutter.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>FontAwesomeIcons.thumbsUp<\/b><span style=\"font-weight: 400;\">: \u0110\u00e2y l\u00e0 c\u00e1ch truy c\u1eadp bi\u1ec3u t\u01b0\u1ee3ng <\/span><span style=\"font-weight: 400;\">thumbs up<\/span><span style=\"font-weight: 400;\"> (ng\u00f3n tay c\u00e1i gi\u01a1 l\u00ean) t\u1eeb b\u1ed9 s\u01b0u t\u1eadp FontAwesome.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>size: 50.0<\/b><span style=\"font-weight: 400;\">: K\u00edch th\u01b0\u1edbc c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 50 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color: Colors.green<\/b><span style=\"font-weight: 400;\">: M\u00e0u c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 m\u00e0u xanh l\u00e1 c\u00e2y.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scaffold<\/b><span style=\"font-weight: 400;\">: Cung c\u1ea5p c\u1ea5u tr\u00fac b\u1ed1 c\u1ee5c cho \u1ee9ng d\u1ee5ng, bao g\u1ed3m thanh ti\u00eau \u0111\u1ec1 (<\/span><span style=\"font-weight: 400;\">AppBar<\/span><span style=\"font-weight: 400;\">) v\u00e0 n\u1ed9i dung ch\u00ednh (<\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: Thanh ti\u00eau \u0111\u1ec1 \u1edf \u0111\u1ea7u m\u00e0n h\u00ecnh v\u1edbi v\u0103n b\u1ea3n &#8220;Font Awesome Icon Example&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Center<\/b><span style=\"font-weight: 400;\">: Widget n\u00e0y c\u0103n gi\u1eefa bi\u1ec3u t\u01b0\u1ee3ng trong m\u00e0n h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>MaterialApp<\/b><span style=\"font-weight: 400;\">: Widget bao b\u1ecdc to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng, cung c\u1ea5p c\u00e1c t\u00ednh n\u0103ng nh\u01b0 ch\u1ee7 \u0111\u1ec1 (theme) v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 n\u00e0y, icon &#8220;thumbs up&#8221; t\u1eeb font_awesome_flutter \u0111\u00e3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u00e0 hi\u1ec3n th\u1ecb tr\u00ean m\u00e0n h\u00ecnh.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tuy_chinh_icon_trong_Flutter\"><\/span><strong>T\u00f9y ch\u1ec9nh icon trong Flutter<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><strong>Thay \u0111\u1ed5i m\u00e0u s\u1eafc icon<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 thay \u0111\u1ed5i m\u00e0u s\u1eafc c\u1ee7a m\u1ed9t icon trong Flutter, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <\/span><span style=\"font-weight: 400;\">color<\/span><span style=\"font-weight: 400;\">. Thu\u1ed9c t\u00ednh n\u00e0y cho ph\u00e9p b\u1ea1n ch\u1ec9 \u0111\u1ecbnh m\u00e0u s\u1eafc mong mu\u1ed1n cho icon.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 minh h\u1ecda:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import 'package:flutter\/material.dart';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">void main() =&gt; runApp(MyApp());<\/span>\r\n\r\n<span style=\"font-weight: 400;\">class MyApp extends StatelessWidget {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@override<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0Widget build(BuildContext context) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return MaterialApp(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0home: Scaffold(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text('Thay \u0111\u1ed5i m\u00e0u s\u1eafc icon'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: Center(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Icon(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Icons.favorite,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: Colors.red, \/\/ Thay \u0111\u1ed5i m\u00e0u s\u1eafc icon th\u00e0nh m\u00e0u \u0111\u1ecf<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><b>Output c\u1ee7a \u0111o\u1ea1n code<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Khi ch\u1ea1y \u0111o\u1ea1n code n\u00e0y, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t \u1ee9ng d\u1ee5ng Flutter v\u1edbi giao di\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: M\u1ed9t thanh ti\u00eau \u0111\u1ec1 \u1edf tr\u00ean c\u00f9ng m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n &#8220;Thay \u0111\u1ed5i m\u00e0u s\u1eafc icon&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Body<\/b><span style=\"font-weight: 400;\">: \u1ede gi\u1eefa m\u00e0n h\u00ecnh, m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim (<\/span><span style=\"font-weight: 400;\">favorite<\/span><span style=\"font-weight: 400;\">) t\u1eeb b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng Material Icons s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb. Bi\u1ec3u t\u01b0\u1ee3ng n\u00e0y c\u00f3 m\u00e0u \u0111\u1ecf.<\/span><\/li>\n<\/ul>\n<p><b>Gi\u1ea3i th\u00edch chi ti\u1ebft<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Icons.favorite<\/b><span style=\"font-weight: 400;\">: \u0110\u00e2y l\u00e0 bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim c\u00f3 s\u1eb5n trong b\u1ed9 Material Icons c\u1ee7a Flutter.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>color: Colors.red<\/b><span style=\"font-weight: 400;\">: M\u00e0u c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh m\u00e0u \u0111\u1ecf.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scaffold<\/b><span style=\"font-weight: 400;\">: Cung c\u1ea5p c\u1ea5u tr\u00fac b\u1ed1 c\u1ee5c cho \u1ee9ng d\u1ee5ng, bao g\u1ed3m thanh ti\u00eau \u0111\u1ec1 (<\/span><span style=\"font-weight: 400;\">AppBar<\/span><span style=\"font-weight: 400;\">) v\u00e0 n\u1ed9i dung ch\u00ednh (<\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: Thanh ti\u00eau \u0111\u1ec1 \u1edf \u0111\u1ea7u m\u00e0n h\u00ecnh v\u1edbi v\u0103n b\u1ea3n &#8220;Thay \u0111\u1ed5i m\u00e0u s\u1eafc icon&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Center<\/b><span style=\"font-weight: 400;\">: Widget n\u00e0y c\u0103n gi\u1eefa bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim trong m\u00e0n h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>MaterialApp<\/b><span style=\"font-weight: 400;\">: Widget bao b\u1ecdc to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng, cung c\u1ea5p c\u00e1c t\u00ednh n\u0103ng nh\u01b0 ch\u1ee7 \u0111\u1ec1 (theme) v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 n\u00e0y, icon h\u00ecnh tr\u00e1i tim (<\/span><span style=\"font-weight: 400;\">Icons.favorite<\/span><span style=\"font-weight: 400;\">) s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb v\u1edbi m\u00e0u \u0111\u1ecf nh\u1edd v\u00e0o thu\u1ed9c t\u00ednh <\/span><span style=\"font-weight: 400;\">color: Colors.red<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><strong>Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc icon<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a m\u1ed9t icon, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <\/span><span style=\"font-weight: 400;\">size<\/span><span style=\"font-weight: 400;\">. Thu\u1ed9c t\u00ednh n\u00e0y cho ph\u00e9p b\u1ea1n ch\u1ec9 \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc mong mu\u1ed1n cho icon.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 minh h\u1ecda:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import 'package:flutter\/material.dart';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">void main() =&gt; runApp(MyApp());<\/span>\r\n\r\n<span style=\"font-weight: 400;\">class MyApp extends StatelessWidget {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@override<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0Widget build(BuildContext context) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return MaterialApp(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0home: Scaffold(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text('Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc icon'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: Center(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Icon(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Icons.favorite,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0size: 50.0, \/\/ Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc icon th\u00e0nh 50<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><b>Output c\u1ee7a \u0111o\u1ea1n code<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Khi ch\u1ea1y \u0111o\u1ea1n code n\u00e0y, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t \u1ee9ng d\u1ee5ng Flutter v\u1edbi giao di\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: M\u1ed9t thanh ti\u00eau \u0111\u1ec1 \u1edf tr\u00ean c\u00f9ng m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n &#8220;Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc icon&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Body<\/b><span style=\"font-weight: 400;\">: \u1ede gi\u1eefa m\u00e0n h\u00ecnh, m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim (<\/span><span style=\"font-weight: 400;\">favorite<\/span><span style=\"font-weight: 400;\">) t\u1eeb b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng Material Icons s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb. Bi\u1ec3u t\u01b0\u1ee3ng n\u00e0y c\u00f3 k\u00edch th\u01b0\u1edbc l\u00e0 50 pixel.<\/span><\/li>\n<\/ul>\n<p><b>Gi\u1ea3i th\u00edch chi ti\u1ebft<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Icons.favorite<\/b><span style=\"font-weight: 400;\">: \u0110\u00e2y l\u00e0 bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim c\u00f3 s\u1eb5n trong b\u1ed9 Material Icons c\u1ee7a Flutter.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>size: 50.0<\/b><span style=\"font-weight: 400;\">: K\u00edch th\u01b0\u1edbc c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh 50 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scaffold<\/b><span style=\"font-weight: 400;\">: Cung c\u1ea5p c\u1ea5u tr\u00fac b\u1ed1 c\u1ee5c cho \u1ee9ng d\u1ee5ng, bao g\u1ed3m thanh ti\u00eau \u0111\u1ec1 (<\/span><span style=\"font-weight: 400;\">AppBar<\/span><span style=\"font-weight: 400;\">) v\u00e0 n\u1ed9i dung ch\u00ednh (<\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: Thanh ti\u00eau \u0111\u1ec1 \u1edf \u0111\u1ea7u m\u00e0n h\u00ecnh v\u1edbi v\u0103n b\u1ea3n &#8220;Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc icon&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Center<\/b><span style=\"font-weight: 400;\">: Widget n\u00e0y c\u0103n gi\u1eefa bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim trong m\u00e0n h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>MaterialApp<\/b><span style=\"font-weight: 400;\">: Widget bao b\u1ecdc to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng, cung c\u1ea5p c\u00e1c t\u00ednh n\u0103ng nh\u01b0 ch\u1ee7 \u0111\u1ec1 (theme) v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 n\u00e0y, icon h\u00ecnh tr\u00e1i tim (<\/span><span style=\"font-weight: 400;\">Icons.favorite<\/span><span style=\"font-weight: 400;\">) s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb v\u1edbi k\u00edch th\u01b0\u1edbc 50 nh\u1edd v\u00e0o thu\u1ed9c t\u00ednh <\/span><span style=\"font-weight: 400;\">size: 50.0<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><strong>Thay \u0111\u1ed5i v\u1ecb tr\u00ed icon<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 thay \u0111\u1ed5i v\u1ecb tr\u00ed c\u1ee7a m\u1ed9t icon, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <\/span><span style=\"font-weight: 400;\">alignment<\/span><span style=\"font-weight: 400;\">. Thu\u1ed9c t\u00ednh n\u00e0y cho ph\u00e9p b\u1ea1n ch\u1ec9 \u0111\u1ecbnh v\u1ecb tr\u00ed mong mu\u1ed1n cho icon trong widget ch\u1ee9a n\u00f3.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 minh h\u1ecda:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import 'package:flutter\/material.dart';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">void main() =&gt; runApp(MyApp());<\/span>\r\n\r\n<span style=\"font-weight: 400;\">class MyApp extends StatelessWidget {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@override<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0Widget build(BuildContext context) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return MaterialApp(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0home: Scaffold(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text('Thay \u0111\u1ed5i v\u1ecb tr\u00ed icon'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: Container(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alignment: Alignment.bottomRight, \/\/ Thay \u0111\u1ed5i v\u1ecb tr\u00ed icon<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Icon(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Icons.favorite,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0size: 50.0,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><b>Output c\u1ee7a \u0111o\u1ea1n code<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Khi ch\u1ea1y \u0111o\u1ea1n code n\u00e0y, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t \u1ee9ng d\u1ee5ng Flutter v\u1edbi giao di\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: M\u1ed9t thanh ti\u00eau \u0111\u1ec1 \u1edf tr\u00ean c\u00f9ng m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n &#8220;Thay \u0111\u1ed5i v\u1ecb tr\u00ed icon&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Body<\/b><span style=\"font-weight: 400;\">: \u1ede g\u00f3c d\u01b0\u1edbi b\u00ean ph\u1ea3i c\u1ee7a m\u00e0n h\u00ecnh, m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim (<\/span><span style=\"font-weight: 400;\">favorite<\/span><span style=\"font-weight: 400;\">) t\u1eeb b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng Material Icons s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb. Bi\u1ec3u t\u01b0\u1ee3ng n\u00e0y c\u00f3 k\u00edch th\u01b0\u1edbc l\u00e0 50 pixel.<\/span><\/li>\n<\/ul>\n<p><b>Gi\u1ea3i th\u00edch chi ti\u1ebft<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Container<\/b><span style=\"font-weight: 400;\">: Widget bao b\u1ecdc v\u00e0 qu\u1ea3n l\u00fd b\u1ed1 c\u1ee5c c\u1ee7a con b\u00ean trong. N\u00f3 c\u00f3 thu\u1ed9c t\u00ednh <\/span><span style=\"font-weight: 400;\">alignment<\/span><span style=\"font-weight: 400;\"> \u0111\u1ec3 \u0111\u1ecbnh v\u1ecb con trong kh\u00f4ng gian c\u1ee7a n\u00f3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>alignment: Alignment.bottomRight<\/b><span style=\"font-weight: 400;\">: \u0110\u1eb7t v\u1ecb tr\u00ed c\u1ee7a n\u1ed9i dung (\u1edf \u0111\u00e2y l\u00e0 bi\u1ec3u t\u01b0\u1ee3ng) v\u1ec1 g\u00f3c d\u01b0\u1edbi b\u00ean ph\u1ea3i c\u1ee7a <\/span><span style=\"font-weight: 400;\">Container<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Icons.favorite<\/b><span style=\"font-weight: 400;\">: Bi\u1ec3u t\u01b0\u1ee3ng tr\u00e1i tim c\u00f3 s\u1eb5n trong b\u1ed9 Material Icons c\u1ee7a Flutter.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>size: 50.0<\/b><span style=\"font-weight: 400;\">: K\u00edch th\u01b0\u1edbc c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00e0 50 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scaffold<\/b><span style=\"font-weight: 400;\">: Cung c\u1ea5p c\u1ea5u tr\u00fac b\u1ed1 c\u1ee5c cho \u1ee9ng d\u1ee5ng, bao g\u1ed3m thanh ti\u00eau \u0111\u1ec1 (<\/span><span style=\"font-weight: 400;\">AppBar<\/span><span style=\"font-weight: 400;\">) v\u00e0 n\u1ed9i dung ch\u00ednh (<\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: Thanh ti\u00eau \u0111\u1ec1 \u1edf \u0111\u1ea7u m\u00e0n h\u00ecnh v\u1edbi v\u0103n b\u1ea3n &#8220;Thay \u0111\u1ed5i v\u1ecb tr\u00ed icon&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>MaterialApp<\/b><span style=\"font-weight: 400;\">: Widget bao b\u1ecdc to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng, cung c\u1ea5p c\u00e1c t\u00ednh n\u0103ng nh\u01b0 ch\u1ee7 \u0111\u1ec1 (theme) v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 n\u00e0y, icon h\u00ecnh tr\u00e1i tim (<\/span><span style=\"font-weight: 400;\">Icons.favorite<\/span><span style=\"font-weight: 400;\">) s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb \u1edf g\u00f3c d\u01b0\u1edbi b\u00ean ph\u1ea3i c\u1ee7a widget ch\u1ee9a n\u00f3 nh\u1edd v\u00e0o thu\u1ed9c t\u00ednh <\/span><span style=\"font-weight: 400;\">alignment: Alignment.bottomRight<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cac_meo_va_luu_y_khi_lam_viec_voi_icon_trong_Flutter\"><\/span><strong>C\u00e1c m\u1eb9o v\u00e0 l\u01b0u \u00fd khi l\u00e0m vi\u1ec7c v\u1edbi icon trong Flutter<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><strong>S\u1eed d\u1ee5ng icon \u0111\u1ec3 c\u1ea3i thi\u1ec7n UI\/UX<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Khi ch\u1ecdn icon cho \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n, \u0111i\u1ec1u quan tr\u1ecdng l\u00e0 ph\u1ea3i \u0111\u1ea3m b\u1ea3o r\u1eb1ng icon \u0111\u00f3 r\u00f5 r\u00e0ng v\u00e0 d\u1ec5 hi\u1ec3u \u0111\u1ed1i v\u1edbi ng\u01b0\u1eddi d\u00f9ng. Icon ph\u1ea3i ph\u00f9 h\u1ee3p v\u1edbi ch\u1ee9c n\u0103ng m\u00e0 n\u00f3 \u0111\u1ea1i di\u1ec7n v\u00e0 tu\u00e2n theo c\u00e1c nguy\u00ean t\u1eafc thi\u1ebft k\u1ebf chung c\u1ee7a \u1ee9ng d\u1ee5ng.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u01a1n gi\u1ea3n v\u00e0 d\u1ec5 hi\u1ec3u: Icon n\u00ean \u0111\u01a1n gi\u1ea3n, kh\u00f4ng qu\u00e1 ph\u1ee9c t\u1ea1p \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng nh\u1eadn di\u1ec7n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ph\u00f9 h\u1ee3p v\u1edbi ng\u1eef c\u1ea3nh: Ch\u1ecdn icon ph\u00f9 h\u1ee3p v\u1edbi ng\u1eef c\u1ea3nh s\u1eed d\u1ee5ng. V\u00ed d\u1ee5: icon tr\u00e1i tim c\u00f3 th\u1ec3 bi\u1ec3u th\u1ecb y\u00eau th\u00edch ho\u1eb7c y\u00eau m\u1ebfn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">K\u00edch th\u01b0\u1edbc v\u00e0 m\u00e0u s\u1eafc: \u0110\u1ea3m b\u1ea3o icon c\u00f3 k\u00edch th\u01b0\u1edbc v\u00e0 m\u00e0u s\u1eafc ph\u00f9 h\u1ee3p v\u1edbi giao di\u1ec7n chung c\u1ee7a \u1ee9ng d\u1ee5ng.<\/span><\/li>\n<\/ul>\n<p>M\u1ed9t s\u1ed1 v\u00ed d\u1ee5 th\u1ef1c t\u1ebf:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Icon menu: S\u1eed d\u1ee5ng icon ba g\u1ea1ch ngang (hamburger) \u0111\u1ec3 bi\u1ec3u th\u1ecb menu.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Icon t\u00ecm ki\u1ebfm: S\u1eed d\u1ee5ng icon k\u00ednh l\u00fap \u0111\u1ec3 bi\u1ec3u th\u1ecb ch\u1ee9c n\u0103ng t\u00ecm ki\u1ebfm.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Icon th\u00f4ng b\u00e1o: S\u1eed d\u1ee5ng icon chu\u00f4ng \u0111\u1ec3 bi\u1ec3u th\u1ecb th\u00f4ng b\u00e1o.<\/span><\/li>\n<\/ul>\n<p><strong>V\u00ed d\u1ee5 minh h\u1ecda:<\/strong><\/p>\n<pre><span style=\"font-weight: 400;\">import 'package:flutter\/material.dart';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">void main() =&gt; runApp(MyApp());<\/span>\r\n\r\n<span style=\"font-weight: 400;\">class MyApp extends StatelessWidget {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@override<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0Widget build(BuildContext context) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return MaterialApp(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0home: Scaffold(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text('C\u1ea3i thi\u1ec7n UI\/UX v\u1edbi icon'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: Center(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Column(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mainAxisAlignment: MainAxisAlignment.center,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0children: &lt;Widget&gt;[<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Icon(Icons.menu, size: 40.0, color: Colors.blue),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Icon(Icons.search, size: 40.0, color: Colors.green),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Icon(Icons.notifications, size: 40.0, color: Colors.red),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><b>Output c\u1ee7a \u0111o\u1ea1n code<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Khi ch\u1ea1y \u0111o\u1ea1n code n\u00e0y, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t \u1ee9ng d\u1ee5ng Flutter v\u1edbi giao di\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: M\u1ed9t thanh ti\u00eau \u0111\u1ec1 \u1edf tr\u00ean c\u00f9ng m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n &#8220;C\u1ea3i thi\u1ec7n UI\/UX v\u1edbi icon&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Body<\/b><span style=\"font-weight: 400;\">: \u1ede gi\u1eefa m\u00e0n h\u00ecnh, ba bi\u1ec3u t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb theo chi\u1ec1u d\u1ecdc (t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi):<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>Icon menu<\/b><span style=\"font-weight: 400;\">: M\u00e0u xanh d\u01b0\u01a1ng, k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>Icon search<\/b><span style=\"font-weight: 400;\">: M\u00e0u xanh l\u00e1 c\u00e2y, k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>Icon notifications<\/b><span style=\"font-weight: 400;\">: M\u00e0u \u0111\u1ecf, k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><b>Gi\u1ea3i th\u00edch chi ti\u1ebft<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Column<\/b><span style=\"font-weight: 400;\">: Widget n\u00e0y s\u1eafp x\u1ebfp c\u00e1c con c\u1ee7a n\u00f3 (\u1edf \u0111\u00e2y l\u00e0 c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng) theo chi\u1ec1u d\u1ecdc.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>mainAxisAlignment: MainAxisAlignment.center<\/b><span style=\"font-weight: 400;\">: Thu\u1ed9c t\u00ednh n\u00e0y c\u0103n gi\u1eefa c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng theo chi\u1ec1u d\u1ecdc c\u1ee7a m\u00e0n h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Icon(Icons.menu)<\/b><span style=\"font-weight: 400;\">: Bi\u1ec3u t\u01b0\u1ee3ng menu c\u00f3 s\u1eb5n trong b\u1ed9 Material Icons c\u1ee7a Flutter, \u0111\u01b0\u1ee3c \u0111\u1eb7t m\u00e0u xanh d\u01b0\u01a1ng v\u00e0 k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Icon(Icons.search)<\/b><span style=\"font-weight: 400;\">: Bi\u1ec3u t\u01b0\u1ee3ng t\u00ecm ki\u1ebfm, \u0111\u01b0\u1ee3c \u0111\u1eb7t m\u00e0u xanh l\u00e1 c\u00e2y v\u00e0 k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Icon(Icons.notifications)<\/b><span style=\"font-weight: 400;\">: Bi\u1ec3u t\u01b0\u1ee3ng th\u00f4ng b\u00e1o, \u0111\u01b0\u1ee3c \u0111\u1eb7t m\u00e0u \u0111\u1ecf v\u00e0 k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scaffold<\/b><span style=\"font-weight: 400;\">: Cung c\u1ea5p c\u1ea5u tr\u00fac b\u1ed1 c\u1ee5c cho \u1ee9ng d\u1ee5ng, bao g\u1ed3m thanh ti\u00eau \u0111\u1ec1 (<\/span><span style=\"font-weight: 400;\">AppBar<\/span><span style=\"font-weight: 400;\">) v\u00e0 n\u1ed9i dung ch\u00ednh (<\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: Thanh ti\u00eau \u0111\u1ec1 \u1edf \u0111\u1ea7u m\u00e0n h\u00ecnh v\u1edbi v\u0103n b\u1ea3n &#8220;C\u1ea3i thi\u1ec7n UI\/UX v\u1edbi icon&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Center<\/b><span style=\"font-weight: 400;\">: Widget n\u00e0y c\u0103n gi\u1eefa to\u00e0n b\u1ed9 <\/span><span style=\"font-weight: 400;\">Column<\/span><span style=\"font-weight: 400;\"> tr\u00ean m\u00e0n h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>MaterialApp<\/b><span style=\"font-weight: 400;\">: Widget bao b\u1ecdc to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng, cung c\u1ea5p c\u00e1c t\u00ednh n\u0103ng nh\u01b0 ch\u1ee7 \u0111\u1ec1 (theme) v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng.<\/span><\/li>\n<\/ul>\n<h3><strong>T\u1ed1i \u01b0u h\u00f3a icon cho hi\u1ec7u su\u1ea5t \u1ee9ng d\u1ee5ng<\/strong><\/h3>\n<p><strong>S\u1eed d\u1ee5ng icon vector thay v\u00ec bitmap<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Icon vector, nh\u01b0 SVG ho\u1eb7c c\u00e1c icon t\u1eeb b\u1ed9 icon c\u1ee7a Flutter, th\u01b0\u1eddng c\u00f3 k\u00edch th\u01b0\u1edbc nh\u1ecf h\u01a1n v\u00e0 c\u00f3 th\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc m\u00e0 kh\u00f4ng l\u00e0m gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng. \u0110i\u1ec1u n\u00e0y gi\u00fap t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t v\u00e0 ti\u1ebft ki\u1ec7m b\u1ed9 nh\u1edb cho \u1ee9ng d\u1ee5ng.<\/span><\/p>\n<p><strong>H\u1ea1n ch\u1ebf s\u1ed1 l\u01b0\u1ee3ng icon s\u1eed d\u1ee5ng trong m\u1ed9t m\u00e0n h\u00ecnh<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng qu\u00e1 nhi\u1ec1u icon tr\u00ean m\u1ed9t m\u00e0n h\u00ecnh c\u00f3 th\u1ec3 l\u00e0m gi\u1ea3m hi\u1ec7u su\u1ea5t c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0 l\u00e0m cho giao di\u1ec7n tr\u1edf n\u00ean r\u1ed1i r\u1eafm. H\u1ea1n ch\u1ebf s\u1ed1 l\u01b0\u1ee3ng icon v\u00e0 ch\u1ec9 s\u1eed d\u1ee5ng nh\u1eefng icon th\u1ef1c s\u1ef1 c\u1ea7n thi\u1ebft \u0111\u1ec3 c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/span><\/p>\n<p><strong>V\u00ed d\u1ee5 minh h\u1ecda:<\/strong><\/p>\n<pre><span style=\"font-weight: 400;\">import 'package:flutter\/material.dart';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">void main() =&gt; runApp(MyApp());<\/span>\r\n\r\n<span style=\"font-weight: 400;\">class MyApp extends StatelessWidget {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0@override<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0Widget build(BuildContext context) {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0return MaterialApp(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0home: Scaffold(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appBar: AppBar(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: Text('T\u1ed1i \u01b0u h\u00f3a icon cho hi\u1ec7u su\u1ea5t'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body: Center(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child: Column(<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mainAxisAlignment: MainAxisAlignment.center,<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0children: &lt;Widget&gt;[<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Icon(Icons.home, size: 40.0, color: Colors.blue),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Icon(Icons.settings, size: 40.0, color: Colors.green),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Icon(Icons.contact_mail, size: 40.0, color: Colors.red),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0}<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><b>Output c\u1ee7a \u0111o\u1ea1n code<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Khi ch\u1ea1y \u0111o\u1ea1n code n\u00e0y, b\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t \u1ee9ng d\u1ee5ng Flutter v\u1edbi giao di\u1ec7n nh\u01b0 sau:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: M\u1ed9t thanh ti\u00eau \u0111\u1ec1 \u1edf tr\u00ean c\u00f9ng m\u00e0n h\u00ecnh hi\u1ec3n th\u1ecb v\u0103n b\u1ea3n &#8220;T\u1ed1i \u01b0u h\u00f3a icon cho hi\u1ec7u su\u1ea5t&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Body<\/b><span style=\"font-weight: 400;\">: \u1ede gi\u1eefa m\u00e0n h\u00ecnh, ba bi\u1ec3u t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb theo chi\u1ec1u d\u1ecdc (t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi):<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>Icon home<\/b><span style=\"font-weight: 400;\">: M\u00e0u xanh d\u01b0\u01a1ng, k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>Icon settings<\/b><span style=\"font-weight: 400;\">: M\u00e0u xanh l\u00e1 c\u00e2y, k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>Icon contact_mail<\/b><span style=\"font-weight: 400;\">: M\u00e0u \u0111\u1ecf, k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><b>Gi\u1ea3i th\u00edch chi ti\u1ebft<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Column<\/b><span style=\"font-weight: 400;\">: Widget n\u00e0y s\u1eafp x\u1ebfp c\u00e1c con c\u1ee7a n\u00f3 (\u1edf \u0111\u00e2y l\u00e0 c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng) theo chi\u1ec1u d\u1ecdc.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>mainAxisAlignment: MainAxisAlignment.center<\/b><span style=\"font-weight: 400;\">: C\u0103n gi\u1eefa c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng theo chi\u1ec1u d\u1ecdc c\u1ee7a m\u00e0n h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Icon(Icons.home)<\/b><span style=\"font-weight: 400;\">: Bi\u1ec3u t\u01b0\u1ee3ng nh\u00e0 (home) c\u00f3 s\u1eb5n trong b\u1ed9 Material Icons c\u1ee7a Flutter, \u0111\u01b0\u1ee3c \u0111\u1eb7t m\u00e0u xanh d\u01b0\u01a1ng v\u00e0 k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Icon(Icons.settings)<\/b><span style=\"font-weight: 400;\">: Bi\u1ec3u t\u01b0\u1ee3ng c\u00e0i \u0111\u1eb7t (settings), \u0111\u01b0\u1ee3c \u0111\u1eb7t m\u00e0u xanh l\u00e1 c\u00e2y v\u00e0 k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Icon(Icons.contact_mail)<\/b><span style=\"font-weight: 400;\">: Bi\u1ec3u t\u01b0\u1ee3ng email li\u00ean h\u1ec7 (contact_mail), \u0111\u01b0\u1ee3c \u0111\u1eb7t m\u00e0u \u0111\u1ecf v\u00e0 k\u00edch th\u01b0\u1edbc 40 pixel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scaffold<\/b><span style=\"font-weight: 400;\">: Cung c\u1ea5p c\u1ea5u tr\u00fac b\u1ed1 c\u1ee5c cho \u1ee9ng d\u1ee5ng, bao g\u1ed3m thanh ti\u00eau \u0111\u1ec1 (<\/span><span style=\"font-weight: 400;\">AppBar<\/span><span style=\"font-weight: 400;\">) v\u00e0 n\u1ed9i dung ch\u00ednh (<\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>AppBar<\/b><span style=\"font-weight: 400;\">: Thanh ti\u00eau \u0111\u1ec1 \u1edf \u0111\u1ea7u m\u00e0n h\u00ecnh v\u1edbi v\u0103n b\u1ea3n &#8220;T\u1ed1i \u01b0u h\u00f3a icon cho hi\u1ec7u su\u1ea5t&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Center<\/b><span style=\"font-weight: 400;\">: Widget n\u00e0y c\u0103n gi\u1eefa to\u00e0n b\u1ed9 <\/span><span style=\"font-weight: 400;\">Column<\/span><span style=\"font-weight: 400;\"> tr\u00ean m\u00e0n h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>MaterialApp<\/b><span style=\"font-weight: 400;\">: Widget bao b\u1ecdc to\u00e0n b\u1ed9 \u1ee9ng d\u1ee5ng, cung c\u1ea5p c\u00e1c t\u00ednh n\u0103ng nh\u01b0 ch\u1ee7 \u0111\u1ec1 (theme) v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 n\u00e0y, ch\u00fang ta s\u1eed d\u1ee5ng c\u00e1c icon vector t\u1eeb Flutter, v\u00e0 gi\u1edbi h\u1ea1n s\u1ed1 l\u01b0\u1ee3ng icon tr\u00ean m\u00e0n h\u00ecnh \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o hi\u1ec7u su\u1ea5t c\u1ee7a \u1ee9ng d\u1ee5ng.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Flutter_icon\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Flutter icon<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><strong>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng g\u00f3i font_awesome_flutter?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 c\u00e0i \u0111\u1eb7t v\u00e0 s\u1eed d\u1ee5ng font_awesome_flutter, th\u00eam d\u00f2ng font_awesome_flutter: ^10.0.0 v\u00e0o ph\u1ea7n dependencies c\u1ee7a file pubspec.yaml, sau \u0111\u00f3 ch\u1ea1y l\u1ec7nh flutter pub get. Sau \u0111\u00f3, import v\u00e0 s\u1eed d\u1ee5ng icon t\u1eeb g\u00f3i n\u00e0y trong m\u00e3 ngu\u1ed3n c\u1ee7a b\u1ea1n.<\/span><\/p>\n<h3><strong>C\u00e1c g\u00f3i icon b\u00ean ngo\u00e0i ph\u1ed5 bi\u1ebfn cho Flutter l\u00e0 g\u00ec?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 g\u00f3i icon b\u00ean ngo\u00e0i ph\u1ed5 bi\u1ebfn cho Flutter bao g\u1ed3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">font_awesome_flutter<\/span><span style=\"font-weight: 400;\">: Cung c\u1ea5p h\u01a1n 1500 icon t\u1eeb Font Awesome.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">line_awesome_flutter<\/span><span style=\"font-weight: 400;\">: Cung c\u1ea5p b\u1ed9 icon \u0111\u1eb9p m\u1eaft t\u1eeb Line Awesome.<\/span><\/li>\n<\/ul>\n<h3><strong>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 kh\u1eafc ph\u1ee5c l\u1ed7i kh\u00f4ng t\u00ecm th\u1ea5y icon khi s\u1eed d\u1ee5ng c\u00e1c g\u00f3i b\u00ean ngo\u00e0i?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ea3m b\u1ea3o r\u1eb1ng b\u1ea1n \u0111\u00e3 th\u00eam \u0111\u00fang t\u00ean g\u00f3i v\u00e0 phi\u00ean b\u1ea3n v\u00e0o file pubspec.yaml, ch\u1ea1y l\u1ec7nh flutter pub get, v\u00e0 import \u0111\u00fang package trong m\u00e3 ngu\u1ed3n c\u1ee7a b\u1ea1n. N\u1ebfu v\u1ea5n \u0111\u1ec1 v\u1eabn t\u1ed3n t\u1ea1i, h\u00e3y ki\u1ec3m tra t\u00e0i li\u1ec7u c\u1ee7a g\u00f3i \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o r\u1eb1ng b\u1ea1n \u0111ang s\u1eed d\u1ee5ng \u0111\u00fang t\u00ean icon.<\/span><\/p>\n<h3><strong>S\u1eed d\u1ee5ng nhi\u1ec1u g\u00f3i icon trong c\u00f9ng m\u1ed9t d\u1ef1 \u00e1n c\u00f3 g\u00e2y xung \u0111\u1ed9t kh\u00f4ng?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Th\u00f4ng th\u01b0\u1eddng, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng nhi\u1ec1u g\u00f3i icon trong c\u00f9ng m\u1ed9t d\u1ef1 \u00e1n m\u00e0 kh\u00f4ng g\u1eb7p xung \u0111\u1ed9t, mi\u1ec5n l\u00e0 c\u00e1c g\u00f3i \u0111\u00f3 kh\u00f4ng s\u1eed d\u1ee5ng c\u00e1c t\u00ean class ho\u1eb7c t\u00ean bi\u1ebfn gi\u1ed1ng nhau. N\u1ebfu c\u00f3 xung \u0111\u1ed9t, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng alias khi import c\u00e1c g\u00f3i \u0111\u1ec3 tr\u00e1nh s\u1ef1 tr\u00f9ng l\u1eb7p.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_Flutter_icon\"><\/span><strong>T\u1ed5ng k\u1ebft Flutter icon<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Flutter Icon l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd v\u00e0 ti\u1ec7n l\u1ee3i trong vi\u1ec7c t\u1ea1o giao di\u1ec7n cho \u1ee9ng d\u1ee5ng. V\u1edbi b\u1ed9 icon phong ph\u00fa t\u1eeb Material Icons, Flutter cho ph\u00e9p t\u00edch h\u1ee3p d\u1ec5 d\u00e0ng v\u00e0 t\u00f9y ch\u1ec9nh linh ho\u1ea1t v\u1ec1 m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc v\u00e0 v\u1ecb tr\u00ed. Kh\u1ea3 n\u0103ng m\u1edf r\u1ed9ng t\u1ed1t c\u1ee7a c\u00e1c icon vector gi\u00fap \u0111\u1ea3m b\u1ea3o ch\u1ea5t l\u01b0\u1ee3ng h\u00ecnh \u1ea3nh tr\u00ean nhi\u1ec1u thi\u1ebft b\u1ecb v\u00e0 \u0111\u1ed9 ph\u00e2n gi\u1ea3i kh\u00e1c nhau.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tuy nhi\u00ean, c\u1ea7n l\u01b0u \u00fd s\u1eed d\u1ee5ng icons ph\u00f9 h\u1ee3p v\u1edbi ng\u1eef c\u1ea3nh, duy tr\u00ec t\u00ednh nh\u1ea5t qu\u00e1n v\u1ec1 k\u00edch th\u01b0\u1edbc v\u00e0 m\u00e0u s\u1eafc, v\u00e0 \u0111\u1ea3m b\u1ea3o kh\u1ea3 n\u0103ng truy c\u1eadp \u0111\u1ec3 t\u1ed1i \u01b0u tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. V\u1edbi c\u00e1c \u01b0u \u0111i\u1ec3m n\u00e0y, Flutter Icon l\u00e0 l\u1ef1a ch\u1ecdn l\u00fd t\u01b0\u1edfng \u0111\u1ec3 t\u1ea1o giao di\u1ec7n tr\u1ef1c quan v\u00e0 hi\u1ec7n \u0111\u1ea1i cho \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng.<\/span><\/p>\n<p>Ngo\u00e0i ra, b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o c\u00e1c b\u00e0i vi\u1ebft thu\u1ed9c ch\u1ee7 \u0111\u1ec1 Flutter:<\/p>\n<ul>\n<li><a href=\"https:\/\/itviec.com\/blog\/flutter-roadmap-lo-trinh-hoc-flutter\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter roadmap: L\u1ed9 tr\u00ecnh h\u1ecdc Flutter to\u00e0n di\u1ec7n A-Z<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/lap-trinh-flutter\/\" target=\"_blank\" rel=\"noopener\"><strong>L\u1eadp tr\u00ecnh Flutter: H\u01b0\u1edbng d\u1eabn c\u00e1ch ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng v\u1edbi Flutter<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/tai-lieu-hoc-flutter\/\" target=\"_blank\" rel=\"noopener\"><strong>H\u1ecdc Flutter to\u00e0n di\u1ec7n v\u1edbi 50+ t\u00e0i li\u1ec7u Flutter m\u1edbi nh\u1ea5t<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/itviec.com\/blog\/cap-nhat-flutter-version-moi-nhat\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter version: T\u1ed5ng quan c\u00e1c phi\u00ean b\u1ea3n Flutter v\u00e0 c\u00e1ch c\u1eadp nh\u1eadt<\/strong><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Flutter icon l\u00e0 m\u1ed9t trong nh\u1eefng y\u1ebfu t\u1ed1 quan tr\u1ecdng g\u00f3p ph\u1ea7n t\u1ea1o n\u00ean giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI) \u0111\u1eb9p m\u1eaft v\u00e0 chuy\u00ean nghi\u1ec7p cho c\u00e1c \u1ee9ng d\u1ee5ng Flutter. V\u1edbi kho th\u01b0 vi\u1ec7n icon phong ph\u00fa v\u00e0 \u0111a d\u1ea1ng, c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u00f9y ch\u1ec9nh v\u00e0 l\u1ef1a ch\u1ecdn icon ph\u00f9 h\u1ee3p [&hellip;]<\/p>\n","protected":false},"author":203,"featured_media":77543,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-77297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Flutter icon: \u0110\u1ecbnh ngh\u0129a, Ph\u00e2n lo\u1ea1i v\u00e0 Chi ti\u1ebft c\u00e1ch \u00e1p d\u1ee5ng A-Z - ITviec Blog<\/title>\n<meta name=\"description\" content=\"B\u00e0i vi\u1ebft gi\u1edbi thi\u1ec7u chi ti\u1ebft v\u1ec1 Flutter icon, c\u00e1ch s\u1eed d\u1ee5ng v\u00e0 nh\u1eefng l\u01b0u \u00fd khi l\u1ef1a ch\u1ecdn icon \u0111\u1ec3 t\u1ea1o ra nh\u1eefng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng tuy\u1ec7t v\u1eddi.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter icon: \u0110\u1ecbnh ngh\u0129a, Ph\u00e2n lo\u1ea1i v\u00e0 Chi ti\u1ebft c\u00e1ch \u00e1p d\u1ee5ng A-Z\" \/>\n<meta property=\"og:description\" content=\"Flutter icon l\u00e0 m\u1ed9t trong nh\u1eefng y\u1ebfu t\u1ed1 quan tr\u1ecdng g\u00f3p ph\u1ea7n t\u1ea1o n\u00ean giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI) \u0111\u1eb9p m\u1eaft v\u00e0 chuy\u00ean nghi\u1ec7p cho c\u00e1c \u1ee9ng d\u1ee5ng Flutter. V\u1edbi kho\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-29T09:51:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/08\/flutter-icon-thumbnail-vippro.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2850\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tien Tran\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tien Tran\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Flutter icon: \u0110\u1ecbnh ngh\u0129a, Ph\u00e2n lo\u1ea1i v\u00e0 Chi ti\u1ebft c\u00e1ch \u00e1p d\u1ee5ng A-Z - ITviec Blog","description":"B\u00e0i vi\u1ebft gi\u1edbi thi\u1ec7u chi ti\u1ebft v\u1ec1 Flutter icon, c\u00e1ch s\u1eed d\u1ee5ng v\u00e0 nh\u1eefng l\u01b0u \u00fd khi l\u1ef1a ch\u1ecdn icon \u0111\u1ec3 t\u1ea1o ra nh\u1eefng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng tuy\u1ec7t v\u1eddi.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Flutter icon: \u0110\u1ecbnh ngh\u0129a, Ph\u00e2n lo\u1ea1i v\u00e0 Chi ti\u1ebft c\u00e1ch \u00e1p d\u1ee5ng A-Z","og_description":"Flutter icon l\u00e0 m\u1ed9t trong nh\u1eefng y\u1ebfu t\u1ed1 quan tr\u1ecdng g\u00f3p ph\u1ea7n t\u1ea1o n\u00ean giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI) \u0111\u1eb9p m\u1eaft v\u00e0 chuy\u00ean nghi\u1ec7p cho c\u00e1c \u1ee9ng d\u1ee5ng Flutter. V\u1edbi kho","og_url":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-08-29T09:51:56+00:00","og_image":[{"width":2850,"height":1500,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/08\/flutter-icon-thumbnail-vippro.png","type":"image\/png"}],"author":"Tien Tran","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Tien Tran","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"24 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/"},"author":{"name":"Tien Tran","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/1595d671c49cfa2a48cd3c0a047a1298"},"headline":"Flutter icon: \u0110\u1ecbnh ngh\u0129a, Ph\u00e2n lo\u1ea1i v\u00e0 Chi ti\u1ebft c\u00e1ch \u00e1p d\u1ee5ng A-Z","datePublished":"2024-08-29T09:51:56+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/"},"wordCount":6479,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/08\/flutter-icon-thumbnail-vippro.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/","url":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/","name":"Flutter icon: \u0110\u1ecbnh ngh\u0129a, Ph\u00e2n lo\u1ea1i v\u00e0 Chi ti\u1ebft c\u00e1ch \u00e1p d\u1ee5ng A-Z - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/08\/flutter-icon-thumbnail-vippro.png","datePublished":"2024-08-29T09:51:56+00:00","description":"B\u00e0i vi\u1ebft gi\u1edbi thi\u1ec7u chi ti\u1ebft v\u1ec1 Flutter icon, c\u00e1ch s\u1eed d\u1ee5ng v\u00e0 nh\u1eefng l\u01b0u \u00fd khi l\u1ef1a ch\u1ecdn icon \u0111\u1ec3 t\u1ea1o ra nh\u1eefng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng tuy\u1ec7t v\u1eddi.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/08\/flutter-icon-thumbnail-vippro.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/08\/flutter-icon-thumbnail-vippro.png","width":2850,"height":1500,"caption":"flutter icon - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/flutter-icon-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Flutter icon: \u0110\u1ecbnh ngh\u0129a, Ph\u00e2n lo\u1ea1i v\u00e0 Chi ti\u1ebft c\u00e1ch \u00e1p d\u1ee5ng A-Z"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/1595d671c49cfa2a48cd3c0a047a1298","name":"Tien Tran","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/tien-tran-author-e1715658627643-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/tien-tran-author-e1715658627643-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/tien-tran-author-e1715658627643-100x100.jpg","caption":"Tien Tran"},"url":"https:\/\/itviec.com\/blog\/author\/tien-tran\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/77297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/203"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=77297"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/77297\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/77543"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=77297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=77297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=77297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}