4

I retrieve some data from my DB, where I have a Column called "icon" in which I stored some Strings. For each of them, I want to pass in the Icon class of Flutter, charging the corresponding Icon. I have the single String inside

items[index]["icon"]

But I can't pass it inside Icon(items[index]["icon"]) How can I do?

Edoardo Tavilla
  • 523
  • 2
  • 7
  • 18

5 Answers5

12

You can use the icons directly with their literal names by accessing the Material Icons font directly with Text() widget.

Example:

Text(
    'perm_contact_calendar',
    style: TextStyle(fontFamily: 'MaterialIcons'),
);

You may use it for custom Icon class to integrate with Material Framework smoothly, but in this case you will need a --no-tree-shake-icons flag for build command since non-constant IconData constructor breaks icon tree shaking.

Sominemo
  • 331
  • 2
  • 7
  • This should be considered the correct answer because the icon codes will change and break when you update Flutter! In Thepeanut's comment, Tom already mentions that, but your answer should have more visibility! – Underscore May 24 '21 at 14:35
  • If anyone's interested, I made [a whole article](https://teletype.in/@itkpi_dart_en/Icon-widget) in which I describe how does the Icon widget work. At its end, I provided the code for the mentioned custom class for dynamic icons. – Sominemo May 25 '21 at 15:56
7

This might help someone in the future.

You do not need to use any Map to create an icon from dynamic name (too much copy-pasting). Instead of icon names you can use icon's numeric identifier from the Icons Class.

Example:

int iconCode = 58840;

// Will display "Up arrow" icon from the list
Icon(IconData(iconCode, fontFamily: 'MaterialIcons'));
Thepeanut
  • 3,074
  • 1
  • 17
  • 23
  • 4
    I highly recommend not doing this. The codepoints changed recently for materialIcons and caused our data to become invalid. I raised an issue and was pushed back that codepoints cannot be relied upon to be consistent. – Tom Feb 11 '21 at 16:09
4

You need a mapping from string to your icon either Icons or FontAwesomeIcons or ... 

Map<String, IconData> iconMapping = {
  'facebook' : FontAwesomeIcons.facebook,
  'twitter' : FontAwesomeIcons.twitter,
  'home' : FontAwesomeIcons.home,
  'audiotrack' : Icons.audiotrack,
};

@override
Widget build(BuildContext context) {
  return Icon(iconMapping [icon], color: HexColor(color));
}

similar question and answer
Trying to dynamically set the Icon based on a JSON string value
Flutter: Show different icons based on value

chunhunghan
  • 51,087
  • 5
  • 102
  • 120
1

Try this out. this is exact thing you are looking for.

Widget buildRemoteIcon(){
  // var remoteIconData = new RemoteIconData(Icons.add); // -> flutter native material icons
  // var remoteIconData = new RemoteIconData("material://Icons.add"); // -> native material icons remotely (dynamically)  
  // var remoteIconData = new RemoteIconData("https://example.com/svg.svg");  // -> loading remote svg
  // var remoteIconData = new RemoteIconData("assets/icons/add.png"); // -> loading local assets 
  // var remoteIconData = new RemoteIconData("custom-namespace://CustomIcons.icon_name"); // -> (requires pre-usage definition)
  var remoteIconData = new RemoteIconData();
  return RemoteIcon(icon: remoteIconData, color: Colors.black);
}

https://github.com/bridgedxyz/dynamic/tree/master/flutter-packages/x_icon

https://pub.dev/packages/x_icon

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

Use This Package From here you can get Material Icons + FontAwesome Icons also you just need to pass the icon name.

https://pub.dev/packages/dynamic_icons

Sakibul Haque
  • 87
  • 1
  • 2
  • 12