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!