Material Icons in Text element?

Is it possible to use the Material Icons in a text element? I’ve searched through the forum and elsewhere online but haven’t been able to find an answer. It may just be that I don’t know the right question to ask but…

The built-in Font Awesome Icons can be entered in a text element with " [fa]chevron-right[/fa] ". Is there any way to do this with material icons? I have tried all variations of mi/material-icons/material-icon/materialicons/materialicon I can think of, to no avail.


Maybe I haven’t tested but may be able to do [material-icons] icon name [/material-icons]

If the same logic works

Thanks for the reply! Perhaps I wasn’t clear enough but I’ve already tried these and none of them work :confused:

[material-icons] icon name [/material-icons]
[material-icon] icon name [/material-icon]
[materialicons] icon name [/materialicons]
[materialicon] icon name [/materialicon]
[mi] icon name [/mi]

I’ve also tried capitalized variations.

Yea Like I said, I’ve never tried it, figured it may work or the docs had the answer. Sorry I couldn’t help more.

+1; love to be able to add to an option set the icon so it can dynamically reference the icon. This can be done with the bubble icon as you mentioned face added to a HTML element will display on the page but not sure how much that helps.

1 Like

I’m curious about this option as well.

Hmm can you think of a way to get that in the middle of a string of text, like is possible with the fa-icons? Otherwise the material-icon could just be “built” with the normal click function.

Did you find any solution?

This is really simple, use a “Material Icon” font and create a style. Here’s how you can do it:

  • Set up a new “text” style and call it “Material Icon”

  • In your text element, type in the name of the icon you want to show. You can find the names of the icons here: Material Symbols and Icons - Google Fonts

    Note: use anything from material icons, not symbols. This has tripped me up before.

  • In your designer, add a text element with the “Material icon” class you created earlier

  • In the text element properties, type the icon you want to display:

Using this method, you could easily utilise it to pull “icons” from the database. e.g. in your database have an “icon” field that stores text. Store the text value of the icon you want it to pull and display it in the way shown above.

This is more flexible than using the Material Icons plugin IMO. If you wanted to nest the icons into other elements, you could just find out the class it creates (i.e. Material Icon style) then link it to that. Hope it helps!

1 Like