Material Icons in Option Set - Dynamic Icons (Doesn't Work for Buttons)

[boston85719]

I wanted to use an approach similar to what would be done when using the font awesome library and use the material icons in a text element so that I could store them in an option set as an attribute.

I came across this post which was very helpful.

General concept:

1. Create option set
2. Add attribute of type text called ‘icon’
3. Put the name of the material icon in the attribute value
4. Have a text element reference the options icon attribute
5. Make sure the text has font type of Material Icon

Use this link to find the icons you want to use and then click on it and scroll to bottom on right side menu and find the icon name and copy by clicking

Unfortunately this doesn’t allow you to use text and an icon in Buttons dynamically, but we can still style a text element to look like a button.

If you want to use them for this purpose you can make your attribute icon value equal to [font=Material Icons] Icon Name ]/font]

Then you can use whatever font family for your text

UPDATE

This doesn’t work for Firefox or Brave…likely only works in Google Chrome Browser

@nick.carroll could we get the ability to set dynamically the icons? Would be awesome for all Icon libraries available now, in the editor Icon element to have an ability to use a dynamic expression for the Icon…it can be text based likely and should be so that we can save them to option sets, or add to option sets the ability to set an attribute to a type of icon.

[rjwilkinson10]

I feel like the recent issue may have over-shadowed the awesomeness of this tip! Thanks for the reference and for sharing this extension which is very useful👍

[nick.carroll]

Noting the feature request! Tbh, this is also something we’d love to be able to offer. Will reach back out when it makes it onto the roadmap.

[rjwilkinson10]

@boston85719 The method in the original post works in Firefox (at least for me it does)