Icons should not be used with <i>

Patterns Report a bug
,
1

Hello :wave:,

I’ve been working with NSW DS for a while and recently while working on a project we found the problem with implementation of icons.

The project has been build specifically on Drupal CMS but it is more related to CKEditor problem which doesn’t allow usage of <i>. The italic tag, <i> is listed as a WCAG compliance Level A error and therefore should not be used if you need to meet the basic accessibility standards.
I also had a bit of research and Google suggests to use the material icons in combination with <span> rather then <i> (Material Icons Guide  |  Google Fonts  |  Google Developers). As the icons sometimes also covers the help text the <span> tag is better way to do it.
Luckily the icons classes works with <span> too, as it has been designed to work purely with CSS classes.
I propose to change the documentation on usage of icons from <i> to <span>.

I am happy to discuss this if there si some concern about this :slight_smile:

3 Likes
2

Hi @honzapara

Thanks for bringing this to our attention and we definitely welcome your feedback.

We’ve done some research on it and agree with your opinion and will make the switch with the next release. Like you mentioned, anyone can do the switch already as current implementation is CSS only and doesn’t rely on use of a specific HTML tag.