How to convert a Flutter String to Icon value

Question

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"
    }
  ]
}

Check this: https://stackoverflow.com/questions/53254963/flutter-show-different-icons-based-on-value — Rob, Jan 22 '20 at 07:00

Muhammad Nabeel · Answer 1 · 2022-01-05T21:18:55.917

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

edited Jan 05 '22 at 21:18

answered Jan 20 '21 at 06:43

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

Mary · Accepted Answer · 2022-04-13T05:10:17.583

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

edited Apr 13 '22 at 05:10

answered Jan 22 '20 at 07:14

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

score 4 · Answer 3 · answered Jul 04 '21 at 13:46

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.

score 2 · Answer 4 · answered Aug 17 '20 at 12:41

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

score 2 · Answer 5 · answered Oct 18 '20 at 08:40

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.

score 1 · Answer 6 · answered Jan 22 '20 at 09:50

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

score 0 · Answer 7 · answered Oct 18 '21 at 08:38

0

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

answered Oct 18 '21 at 08:38

Johnny Andedi

1
1

score 0 · Answer 8 · answered Mar 07 '23 at 00:28

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

answered Mar 07 '23 at 00:28

Rock Dial

129
1
2

How to convert a Flutter String to Icon value

8 Answers8

Linked