Reputation: 375

How to convert a Flutter String to Icon value

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

Upvotes: 19

Answers (9)

obaeda sh

Reputation: 11

You have to change it in your class from string to IconData like this:

final IconData iconData; 
className({Key? key, required this.iconData}) : super(key: key);
.
.
.
.
icon: Icon(widget.iconData)

Upvotes: 0

Rock Dial

Reputation: 179

I used material icon to solve this problem

import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

 icon:  Icon(MdiIcons.fromString('sword'))

Upvotes: 3

Mary

Reputation: 517

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

Upvotes: 12

Muhammad Nabeel

Reputation: 790

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

Upvotes: 26

Johnny Andedi

Reputation: 1

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

Upvotes: 0

vijay

Reputation: 911

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.

Upvotes: 5

Ali.Sh

Reputation: 112

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.

Upvotes: 3

softmarshmallow

Reputation: 1274

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

Upvotes: 3

Gokul Sundar

Reputation: 375

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

Upvotes: 2

How to convert a Flutter String to Icon value

Answers (9)

Related Questions