Ui.Icon

Content Element: Icon

Icons are a common feature of modern UI design. This module provides helpers for inserting SVG icons or making use of popular icon font character collections. The Bulma .icon element class, which is applied to a wrapping  element, provides default sizing and size modifiers to make it easy to fit icons into the visual layout of your page.

SVG

svg :

{ path : String

, altText : String

}

-> Element msg

Construct an icon from an SVG source, with alt text for screen readers

{ path = "icons/bicycle.svg"
, altText = "Bicycle route to destination"
}
  |> Ui.Icon.svg
  |> Ui.render


--> <span class="icon" role="img" aria-label="Bicycle route to destination">
--    <object data="icons/bicycle.svg" type="image/svg+xml" aria-hidden="true"></object>
--  </span>

Browser compatability: Requires support for SVG (to include a raster fallback, use Ui.Media.svg)
HTML tags:  > <object>
ARIA role: img
Element class: .icon
Available modifiers: size
Bulma CSS reference: http://bulma.io/documentation/elements/icon/

Icon font characters

fontAwesome4 :

{ name : String

, altText : String

}

-> Element msg

Construct an icon from the Font Awesome 4 collection, with alt text for screen readers

{ name = "bicycle"
, altText = "Bicycle route to destination"
}
  |> Ui.Icon.fontAwesome4
  |> Ui.render


--> <span class="icon" role="img" aria-label="Bicycle route to destination">
--    <i class="fa fa-bicycle" aria-hidden="true"></i>
--  </span>

HTML tags:  > 
ARIA role: img
Element class: .icon
Available modifiers: color, size, variations
Bulma CSS reference: http://bulma.io/documentation/elements/icon/
Font Awesome 4 reference: http://fontawesome.io/icons/

material :

{ name : String

, altText : String

}

-> Element msg

Construct an icon from Google's Material Design collection, with alt text for screen readers

{ name = "directions_bike"
, altText = "Bicycle route to destination"
}
  |> Ui.Icon.material
  |> Ui.render


--> <span class="icon" role="img" aria-label="Bicycle route to destination">
--    <i class="material-icons" aria-hidden="true">directions_bike</i>
--  </span>

Browser compatability: Requires support for ligatures (not compatible with IE 9 and below)
HTML tags:  > 
ARIA role: img
Element class: .icon
Available modifiers: color, size, variations
Bulma CSS reference: http://bulma.io/documentation/elements/icon/
Material Icons reference: https://material.io/icons/

ionicons :

{ name : String

, altText : String

}

-> Element msg

Construct an icon from the Ionicons collection, with alt text for screen readers

{ name = "android-bicycle"
, altText = "Bicycle route to destination"
}
  |> Ui.Icon.ionicons
  |> Ui.render


--> <span class="icon" role="img" aria-label="Bicycle route to destination">
--    <i class="ion-android-bicycle" aria-hidden="true"></i>
--  </span>

HTML tags:  > 
ARIA role: img
Element class: .icon
Available modifiers: color, size
Bulma CSS reference: http://bulma.io/documentation/elements/icon/
Ionicons reference: http://ionicons.com/

openIconic :

{ name : String

, altText : String

}

-> Element msg

Construct an icon from the Open Iconic collection, with alt text for screen readers

{ name = "map-marker"
, altText = "Your current location"
}
  |> Ui.Icon.openIconic
  |> Ui.render


--> <span class="icon" role="img" aria-label="Your current location">
--    <i class="oi" data-glyph="map-marker" aria-hidden="true"></i>
--  </span>

HTML tags:  > 
ARIA role: img
Element class: .icon
Available modifiers: color, size
Bulma CSS reference: http://bulma.io/documentation/elements/icon/
Open Iconic reference: https://useiconic.com/open

danielnarey/elm-modular-ui/1.0.1

Ui.Icon

Content Element: Icon

SVG

Icon font characters

Modules