14

In Flutter, I'm getting Icon value from json as a String.

I got following error when I tried to use that value

error: The argument type 'String' can't be assigned to the parameter type 'IconData'. (argument_type_not_assignable at [hippo] lib\screens\dynamic_list.dart:71)
{
  "page": 1,
  "MenuItems": [
    {
      "id": 419701,
      "icon": "MdiIcons.account",
      "name": "account"
    },
    {
      "id": 419702,
      "icon": "MdiIcons.currencyUsd",
      "name": "Funds"
    },
    {
      "id": 419703,
      "icon": "MdiIcons.home",
      "name": "home"
    }
  ]
}
Mary
  • 205
  • 1
  • 2
  • 6
Gokul Sundar
  • 305
  • 1
  • 3
  • 12
  • Check this: https://stackoverflow.com/questions/53254963/flutter-show-different-icons-based-on-value – Rob Jan 22 '20 at 07:00

8 Answers8

18

You can do it by using Icon class constants according to official Flutter docs.

Icon(IconData(61668, fontFamily: 'MaterialIcons'));

Check more Icon class constants here: https://api.flutter.dev/flutter/material/Icons-class.html#constants

https://api.flutter.dev/flutter/material/Icons-class.html#constants

Muhammad Nabeel
  • 620
  • 7
  • 10
  • I do not see how this answers the question. Please explain more. – Yunnosch Jan 20 '21 at 06:47
  • 1
    By using Icon class constants, we can use it on JSON as Integer or as String. – Muhammad Nabeel Jan 20 '21 at 06:52
  • 1
    Please add that explanation to the answer itself, by [edit]ing. Also please consider demonstrating how to do that in code (because users more readily upvote answers with code....). – Yunnosch Jan 20 '21 at 06:53
  • Okay, thank you very much for the guidance <3 – Muhammad Nabeel Jan 21 '21 at 05:48
  • 2
    There seems to be an update on 24/06/2020 where these codes don't match the icons anymore: https://github.com/flutter/flutter/issues/75633 Is anyone else experiencing this issue? – user3705905 Jun 09 '21 at 11:04
  • @user3705905 even I'm facing similar issues due to the recent update and the `IconData.codePoint` values stored in database are now more showing different values. – vijay Jul 04 '21 at 13:00
9

you can use Icon class constants according to official Flutter docs. (https://api.flutter.dev/flutter/material/Icons-class.html#constants)

example:IconData(0xf518, fontFamily: 'MaterialIcons')

also you can generate custom images to font icon (Generate to font). save ttf file in assets. pass unicode data (like "e90a").

example:

Icon(IconData(int.parse('0x${e90a}',
    fontFamily: 'family name given in the link above'));
Mary
  • 487
  • 4
  • 18
  • 2
    Hi how do i find out the unicode data for the icon? – Huiting Jun 17 '20 at 14:45
  • 3
    Dart has a builtin function to get the unicode value from a char, so for example when you want to display a pound/hash sign as an icon, you can write this: `Icon(IconData("#".codeUnitAt(0)))` – paolo Jul 31 '20 at 08:19
  • Check the Icon class constants: https://api.flutter.dev/flutter/material/Icons-class.html#constants – Muhammad Nabeel Jan 20 '21 at 06:40
4

As pointed out by @user3705905 and as mentioned in https://github.com/flutter/flutter/issues/75633 using the hexadecimal or IconData.codePoint value won't work any more. In order to overcome the issue and to store references of the icon's IconData you can use below solution using map (for example):

Map<String, IconData> iconsMap = {
   'add_shopping_cart': Icons.add_shopping_cart,
   'calendar_view_week_rounded': Icons.calendar_view_day_rounded,
   'call_end_outlined': Icons.call_end_outlined,
   'call_made': Icons.call_made,
};

Later you can simple use the map key in and later get the Icons data.

vijay
  • 831
  • 9
  • 14
2

use flutter_remote_icon

var remoteIconData = new RemoteIconData("material://Icons.add"); // -> native material icons remotely (dynamically)  

return RemoteIcon(icon: remoteIconData);

https://github.com/softmarshmallow/remote-ui/tree/master/flutter/packages/flutter_remote_icon

https://pub.dev/packages/flutter_remote_icon

softmarshmallow
  • 1,034
  • 2
  • 16
  • 31
2

I create a simple class for that.

import 'package:flutter/material.dart';

class HelperIcons {

  static Map<String, int> materialIcons = <String, int> {
    'ten_k': 0xe52a,
    'ten_mp': 0xe52b,
    'eleven_mp': 0xe52c,
    'twelve_mp': 0xe52d,
    'thirteen_mp': 0xe52e,
    'fourteen_mp': 0xe52f,
    'fifteen_mp': 0xe530,
    'sixteen_mp': 0xe531,
    'seventeen_mp': 0xe532,
    'eighteen_mp': 0xe533,
    'nineteen_mp': 0xe534,
    'one_k': 0xe535,
    'one_k_plus': 0xe536,
    'twenty_mp': 0xe537,
    'twenty_one_mp': 0xe538,
    'twenty_two_mp': 0xe539,
    'twenty_three_mp': 0xe53a,
    'twenty_four_mp': 0xe53b,
    'two_k': 0xe53c,
    'two_k_plus': 0xe53d,
  };

  static Map<String, int> materialIconsWithDirection = <String, int> {
    'arrow_back': 0xe5a7,
    'arrow_back_ios': 0xe5a8,
    'arrow_forward': 0xe5af,
    'arrow_forward_ios': 0xe5b0,
    'arrow_left': 0xe5b1,
    'arrow_right': 0xe5b2,
    'assignment': 0xe5b9,
    'assignment_return': 0xe5bc,
    'backspace': 0xe5d6,
    'battery_unknown': 0xe5e3,
    'call_made': 0xe627,
    'call_merge': 0xe628,
    'call_missed': 0xe629,
    'call_missed_outgoing': 0xe62a,
    'call_received': 0xe62b,
    'call_split': 0xe62c,
    'chevron_left': 0xe652,
    'chevron_right': 0xe653,
  };

  static IconData getIconData(String iconName) {
    iconName = iconName is String ? iconName.toLowerCase().trim() : null;

    if (iconName == null || iconName.isEmpty) {
      return null;
    }

    if (materialIcons.containsKey(iconName)) {
      return IconData(materialIcons[iconName], fontFamily: 'MaterialIcons');
    }

    if (materialIconsWithDirection.containsKey(iconName)) {
      return IconData(
          materialIconsWithDirection[iconName],
          fontFamily: 'MaterialIcons',
          matchTextDirection: true
      );
    }

    return null;
  }

  static bool isExistIcon(String iconName) {
    iconName = iconName is String ? iconName.toLowerCase().trim() : null;

    if (iconName == null || iconName.isEmpty) {
      return false;
    }

    if (materialIcons.containsKey(iconName) || materialIconsWithDirection.containsKey(iconName)) {
      return true;
    }

    return false;
  }
}

Usage :

if (HelperIcons.isExistIcon(iconString)) {
  Icon(HelperIcons.getIconData(iconString))
}

I can't put all the class code here. because this post limited to 30k characters.

Ali.Sh
  • 92
  • 2
  • 7
1
{
  "page": 1,
  "MenuItems": [
    {
      "id": 419701,
      "icon": "0xf2dc",
      "name": "account"
    },
    {
      "id": 419702,
      "icon": "0xf2dc",
      "name": "Funds"
    },
    {
      "id": 419703,
      "icon": "0xf2dc",
      "name": "home"
    }
  ]
}
Icon(IconData(int.parse(_dynamicListMenu[index].icon),
              fontFamily:'Material Design Icons',
              fontPackage:'material_design_icons_flutter'),color: Colors.white, size: 30)
Gokul Sundar
  • 305
  • 1
  • 3
  • 12
0

try to remove this '' Apostrophe , because icon data should not be a string

0

I used material icon to solve this problem

import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

 icon:  Icon(MdiIcons.fromString('sword'))
Rock Dial
  • 129
  • 1
  • 2