I take a totally different approach to everyone else's answers here altogether. Let me prefix my solution and argue by stating that sometimes standards and conventions are meant to be broken, especially in the context of the standard HTML lexical tag definitions.
There's nothing to stop you from creating custom elements that are self-descriptive to it's very purpose.
Both modern browsers and even IE 6+ (w/ shim) can support things like:
or
Just make sure to normalize the tag:
icon { display:block; margin:0; padding:0; border:0; ... }
and use a shim if you need to support IE9 or earlier (see post below).
Check out this StackOverflow Post:
Is there a way to create your own html tag in HTML5
To further my argument, both Google's Angular Directives and the new Polymer projects utilize the concept of custom HTML tags.
