<a href="/account" title="Bekijk mijn account">
<span class="sr-only">Bekijk mijn account</span>
<span class="mdi mdi-account" aria-hidden="true"></span>
</a>
<br /><br />
<a href="/een-link">
<span class="mdi mdi-earth" aria-hidden="true"></span> Het icoon hiernaast is alleen decoratief
</a>
<br /><br />
<button class="btn btn-primary mdi mdi-magnify-plus" title="Klik hier om in te zoomen" style="width: auto; font-size: 20px;">
<span class="sr-only">Klik hier om in te zoomen</span>
</button>
Nijmegen requested to add Material Design Icons (https://materialdesignicons.com) to this framework instead of the default that comes with the MDB framework.
To view the full list of icons go the the material design icons website.
When using an icon for decorative reason, be sure to add aria-hidden="true" to the icon to hide it for assistive technologies.
(https://www.24a11y.com/2017/svg-icon-fonts-accessibility-case-study/)
If the icons have a functional meaning, then you have to add a span with the class sr-only and a title attribute to describe the meaning of the icon:
<a href="/account" title="Bekijk mijn account">
<span class="sr-only">Bekijk mijn account</span>
<span class="mdi mdi-account" aria-hidden="true"></span>
</a>No additional actions, aside from the markup, are needed to use these icons.