3

When I go to the W3C validator service, to try out if it complains about using an <icon> element, with this example:

<!doctype html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8"/>
</head>
<body>
    <icon></icon>
</body>
</html>

The error that I get back from it says the following:

Error: Element icon not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

From line 8, column 2; to line 8, column 7

Content model for element body: Flow content.

The part where it says "not allowed as child of", suggested to me that the <icon> element as such may actually exist, but is intended for something else, and therefore doesn't fit there, structurally. But when i go to the MDN HTML elements reference, there is no <icon> element listed.

Using it works however (I can use it to display a Fontawesome icon), and seeing how HTML5 suggests that we are allowed to make up our own elements (and Angularjs advocates using arbitrary element names for directives), would it actually be bad to use it in practice?

Would it be bad for SEO? Would readers complain? Would parsers complain? Would it not be future-proof?

migrated from webapps.stackexchange.com Dec 8 '18 at 4:47

This question came from our site for power users of web applications.

  • 2
  • Browsers are required to do the best they can with invalid markup but you do not want browsers guessing at your intentions. Browsers will treat it as "tag soup". Google for that. It is not future proof either. There is no such thing as <icon> so don't use it except as a custom element as shown in the link by @MaximillianLaumeister but I don't know if that link is up-to-date or not. – Rob Dec 8 '18 at 13:20
  • Yup, @MaximillianLaumeister's link is the proper solution, as it describes how custom elements are supposed to be declared. More specifically, they need to include a dash in their name. Even in my example code for the W3C validator, if i just rename <icon> to <my-icon>, it validates. – Digital Ninja Dec 9 '18 at 2:26
  • Keep in mind that custom elements only work in Chrome and Firefox. His link also doesn't answer any of your questions. – Rob Dec 9 '18 at 10:03
1

Two things:

  1. Include a reference link in your <head></head> the same way you would link your CSS file: <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  2. Reference your <icon> as <i class="material-icons">cloud</i>

You can learn more about it at W3Schools Icon Tutorial

Appended
I concede to @unor in that, <span> is another way to reference an icon. There seems to be some serious debates between <i> and <span>, but both methods seem to function. I can understand that one person would say that W3C's use of <span> is correct. After all, they set all of the specifications. However... when large, global firms (aka Google) use <i>... well, let's just say that using <i> isn't going to end any time soon.

Sources supporting the <i> tag:
W3.CSS Icons mentions that both <i> and <span> can be used (but, their examples use <i>.)
Google: Material Icons Guide

Sources supporting the <span> tag:
W3C Icon Font
CSS Tricks: HTML for Icon Font Usage
Bootstrap's UseIconic Font Recommendation indicates <span> for HTML and <img> for SVG, and
Font Awesome: Basic Use illustrates using both by wrapping the <span><i></i></span> tags (although this seems a little redundant to me).

I suppose our best option will be decisions based on the programming language and icon use.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.