Semantic-ui: Use <span> (or other tag) for icons instead of <i>

[brigand]

@Knotix I'm not sure where the link is, but "Semantic" in this project refers to creating a consistent language for UI; so it's a new set of semantics; not just reiterating the semantics set by the w3 (which change every year or so, like how <b> is now <strong>, and <i> is now <em>, etc.).

<i> is just a single letter tag name, which happens to be the first letter in the word "icon". There's no deeper meaning. If you want to use <i> for what HTML5Doctor says, just don't give it an icon class, and it should display with the default browser styles (if not, file a bug).

Does that make sense, or could I clarify something?

[brigand]

The reason is you can have an icon button, which is a button containing an icon; as well as other icon elements.

<div class="ui icon button">
    <i class="user icon"></i>
   Add User
</div>

[ShimShamSam]

Hmm, I'm not experienced enough with the full source code. There must be a way to make the class tag-agnostic without breaking the established conventions.

[jlukic]

I've written many posts about this, but basically semantic is not the same as "adherent to W3C specification".

SUI is not intended to follow the "newest rules on high" from a standards organization, but to adopt traits of natural language semantics for creating websites.

<i> tags are one of the few implicit tag meanings found in SUI, its purpose is to allow text nodes to include icons. So when setting values with .text() icons are replaced.This function wouldn't occur with span, only tags like <b>, <i> etc

It also acts as a shorthand because in most examples, iconography has a similar role as text in a page, but has never been given the same level of importance "by specification".

[ShimShamSam]

I don't expect Semantic to be adherent to the spec; I expect it to be spec neutral. Let the classes do the styling, not the tags. I won't be using Semantic if it _forces_ me to go against the spec.

[thaeny-dev]

I would love that the SUI don't bind the icons to the i-tag. I have a case in combination with PrimeNG-controls where it would be very handy to be able to bind icons to any kind of tags (in this case add an icon to tabpanel-header without extra code => span-element)