21.2. Insert a Material symbol into text

When you want to use icons in your text that match the icon set in Mahara, you do not have to enter them as images, but can use them with a bit of CSS.

In Mahara 25.04, we switched to Material symbols which offers hundreds of icons. By using an icon in text via CSS, you don’t need to worry about images and can also easily update them.

In Mahara, we have a small defined set of Material symbols that we use for which we created shortcuts. We did not create shortcuts for all of them. Therefore, the easiest way to use any symbol is by using the following bit of code:

<span class="icon">icon_name</span>

You can find the icon name when you select the Material symbol and scroll to the bottom of the page to the section ‚Icon name‘.