'Flutter String to Icon value

how to convert String value to Icons value in Flutter, i'm getting Icon value from json as a String.

I got following error when i'm 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"
    }
  ]
}

flutter

Solution 1:^[1]

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'));

Solution 2:^[2]

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

Solution 3:^[3]

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

Solution 4:^[4]

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.

Solution 5:^[5]

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.

Solution 6:^[6]

{
  "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)

Solution 7:^[7]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	softmarshmallow
Solution 4	Ali.Sh
Solution 5	vijay
Solution 6	Gokul Sundar
Solution 7	Johnny Andedi

'Flutter String to Icon value

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]