DSO Component Library

# Icon

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <!-- Decorative -->
    <span class="fa fa-road" aria-hidden="true"></span>

    <!-- Semantic -->
    <span class="fa fa-road" aria-hidden="true"></span>

    <!-- Enlarged -->
    <span class="fa fa-question fa-2x" aria-hidden="true"></span>

    <!-- Animated -->
    <span class="fa fa-refresh fa-spin fa-2x" aria-hidden="true"></span>

`
`

    <span class="{{ icon }}" aria-hidden="true"></span>

`
`

    /* Decorative */
    icon: fa fa-road

    /* Semantic */
    icon: fa fa-road
    title: Route via de snelweg

    /* Enlarged */
    icon: fa fa-question fa-2x

    /* Animated */
    icon: fa fa-refresh fa-spin fa-2x

`

- Handle: @icon
- Variants (4): Decorative , Semantic , Enlarged , Animated
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\04-indicators\icon\icon.hbs
- Referenced by (13): @carousel, @button, @anchor, @anchor--download, @anchor--extern, @anchor--icon, @anchor--label, @anchor--iconlabel, @anchor--iconbadge, @anchor--iconlabelbadge, @menu, @menu--open-menu, @aanvragen

There are no notes for this item.

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

`<title>Icon`