Built in Icon Support

Using Bootstrap you would probably use icons in the following way:

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

The sl-ember-components repo took a slightly different route by using a base icon class sl-ember-components-icons instead of the one provided by bootstrap i.e glyphicon. The base icon class sl-ember-components-icons rolls into one, the functionality of the sr-only class and the bootstrap glypicon class. To better illustrate this, compare the following code sample to the former:

<div class="alert alert-danger" role="alert">
  <span class="sl-ember-components-icons glyphicon-exclamation-sign" aria-hidden="true">Error:</span>
  Enter a valid email address
</div>

The sl-ember-components-icons class will make sure that the text "Error:" is not visible to the user, although it will still be present on the page and read aloud by assistive technologies.

Internally within the repo, sl-ember-components-icons class is extended into other component icon classes via LESS. Here's an example of how the class is extended in app/styles/sl-pagination.less

.sl-icon-previous, .sl-icon-next {
    &:extend( .sl-ember-components-icons all );
}

If you are using LESS, you too can extend the sl-ember-components-icons class if you choose to do so. If you are not using LESS and wish to use the sl-ember-components-icons class, you can apply it directly on the element as we saw in the code sample previously, also shown below:

<div class="alert alert-danger" role="alert">
  <span class="sl-ember-components-icons glyphicon-exclamation-sign" aria-hidden="true">Error:</span>
  Enter a valid email address
</div>