Is there a way to dynamically load Material Icons in native android (Java)?

Question

Recently i was able to dynamically load Material Design Icons in Flutter by using the flutter_icons/flutter_icons.dart

// First Approach
Icon icon = new Icon(Icons.settings);

// Second Approach
icon = new Icon(MaterialIcons.getIconData(Model.dynamic_icon_name);

Flutter Screenshot

This got me thinking if i could do something similar using a native android approach, with something like

// Glide Theoretical Example
Glide.with(context.getApplicationContext())
  .asBitmap()
  .load(MaterialIcons.getIconData(Model.dynamic_icon_name))
  .apply(new RequestOptions().fitCenter())
  .into(iconView);

I think it would be interesting to know, since i think could provide some advantage that a developer would not need to bundle those assets with the app

2 ways I can think of. You either have a `MaterialIcons` class in your project holding every single png URL there is and supply it to Glide or you have that class in a lib that already has every icon in its resources — Lennoard Silva, Jul 14 '20 at 14:45
@LennoardSilva Agreed, considering however many icons you would like to display at one time i think that would be the decider on whether to use let your server hosting the icons do the heavy lifting, and the be to just use Glide. implementing such, will post my outcome soon, thanks for the insight. — Keith Ndhlovu, Jul 15 '20 at 05:23

score 0 · Accepted Answer · answered Aug 02 '21 at 16:07

There was no effective way of handling this natively on Android, so the solution i ended up going with was having the server host these icons and i could just serve them down using Glide like this.

Step 1: Backend setup

Download the png assets for the icon of your choice, ie: the thumbs_up icon from this Material Icons link
Now you can go ahead and unzip the image assets into your server's assets folder, in my case this was in my public folder of the server since i was using a Laravel backend. In the end my icons resided in the path public/material-icons/thumb_up_black.png and made sure to keep a consistent naming convention public/material-icons/{icon_name_color}.png this was the vital point since i needed to reference these assets again.
Now we can link the icon with the respective item

Server side


...

// Creating the item
new Item::create([
  'name' => 'Like-able item',
  'icon' => 'thumb_up_black',
]);

...

List items API endpoint result

[
    {
        "name": "Like-able item",
        "icon_url": "https//server-name.fancy/thumb_up_black.png"
    },
    {
        "name": "Like-able item #2",
        "icon_url": "https//server-name.fancy/thumb_up_black.png"
    },
    ....
]

Step 2: Client Setup (Android app)

Once i have consumed the API data and about to display the items, i can use Glide to accomplish this.


ItemModel item = new ItemModel(itemDataFromServer);

Glide.with(context.getApplicationContext())
  .asBitmap()
  .load(MaterialIcons.getIconData(item.icon_url))
  .apply(new RequestOptions().fitCenter())
  .into(iconView);

This was finally how i was able to solve this problem, the nice thing with this implementation was that from our three client apps (Android, iOs and Web) we could use the same if not similar method to display accordingly.

Is there a way to dynamically load Material Icons in native android (Java)?

1 Answers1