The grey circle indicates that the type attribute has not been set. The types available by default are as follows:
Type
alt tag
aboriginal-flag
First Nations content
torres-strait-flag
Torres Strait Island content
quiz-icon
blank
For quiz, a blank alt tag is used as it's likely the title itself will describe what the icon denotes. This can be altered by adding an alt attribute.
In addition, the [heading-tag] attribute allows the size of the heading to change. The default is h2
You can also adjust the [heading-size]. This attribute allows the physical size of the heading to change and leave the semantic tag specified above. The options are h2, h3, h4, h5, h6.
Lastly, adding an [title-icon] attibute adds an id, so code can jump directly to the content via a hash link: learninglab.rmit.edu.au/#my-unique-id. make sure the id is unique.
Examples
Banksia straws and seed yandying
Adjust the sizing
Melting turtle fat into oil
Test your skills
[title-icon type="aboriginal-flag"]Banksia straws and seed yandying[/title-icon]
[title-icon heading-tag="h2" heading-size="h3" type="quiz-icon" alt="Quiz"]Adjust the sizing[/title-icon]
[title-icon heading-tag="h3" type="torres-strait-flag" id="turtle-info"]Melting turtle fat into oil[/title-icon]
[title-icon heading-tag="h4" type="quiz-icon" alt="Quiz"]Test your skills[/title-icon]
Adding custom images
It is possible to add custom images (both in light and dark mode), although this should be used sparingly. More preset types can be added to the base css if needs arise. To do this, first add the type attribute and give it a unique name. Then, use the img attribute. You can also add the img-dark attribute if you require an alternative dark mode version of the image.