Opaque type representing icon builder

Build icon, ready to use in html. It accepts list of svg attributes, for example in case if you want to add an event handler.

-- default
Icon.download
    |> Icon.toHtml []


-- with some attributes
Icon.download
    |> Icon.withSize 10
    |> Icon.withClass "icon-download"
    |> Icon.toHtml [ onClick Download ]

Overwrite class attribute of an icon

Icon.download
    |> Icon.withClass "icon-download"
    |> Icon.toHtml []

Set size attribute of an icon

Icon.download
    |> Icon.withSize 10
    |> Icon.toHtml []

Set unit of size attribute of an icon, one of: "em", "ex", "px", "in", "cm", "mm", "pt", "pc", "%"

Icon.download
    |> Icon.withSize 50
    |> Icon.withSizeUnit "%"
    |> Icon.toHtml []

Set thickness of icon lines, useful when inlining icons with bold / normal text.

Icon.playCircle
    |> Icon.withStrokeWidth 1
    |> Icon.toHtml []

Build custom svg icon

[ Svg.line [ x1 "21", y1 "10", x2 "3", y2 "10" ] []
, Svg.line [ x1 "21", y1 "6", x2 "3", y2 "6" ] []
, Svg.line [ x1 "21", y1 "14", x2 "3", y2 "14" ] []
, Svg.line [ x1 "21", y1 "18", x2 "3", y2 "18" ] []
]
    |> customIcon
    |> withSize 26
    |> withViewBox "0 0 26 26"
    |> toHtml []

Example output:

Set viewBox attribute for a custom icon

Icon.custom [ customSvgPathFittingWithin100pxSquare ]
    |> Icon.withViewBox "0 0 100 100"
    |> Icon.toHtml []

activity image

airplay image

alert-circle image

alert-octagon image

alert-triangle image

align-center image

align-justify image

align-left image

align-right image

anchor image

aperture image

archive image

arrow-down-circle image

arrow-down-left image

arrow-down-right image

arrow-down image

arrow-left-circle image

arrow-left image

arrow-right-circle image

arrow-right image

arrow-up-circle image

arrow-up-left image

arrow-up-right image

arrow-up image

at-sign image

award image

bar-chart-2 image

bar-chart image

battery-charging image

battery image

bell-off image

bell image

bluetooth image

bold image

book-open image

book image

bookmark image

box image

briefcase image

calendar image

camera-off image

camera image

cast image

check-circle image

check-square image

check image

chevron-down image

chevron-left image

chevron-right image

chevron-up image

chevrons-down image

chevrons-left image

chevrons-right image

chevrons-up image

chrome image

circle image

clipboard image

clock image

cloud-drizzle image

cloud-lightning image

cloud-off image

cloud-rain image

cloud-snow image

cloud image

code image

codepen image

command image

compass image

copy image

corner-down-left image

corner-down-right image

corner-left-down image

corner-left-up image

corner-right-down image

corner-right-up image

corner-up-left image

corner-up-right image

cpu image

credit-card image

crop image

crosshair image

database image

delete image

disc image

dollar-sign image

download-cloud image

download image

droplet image

edit-2 image

edit-3 image

edit image

external-link image

eye-off image

eye image

facebook image

fast-forward image

feather image

file-minus image

file-plus image

file-text image

file image

film image

filter image

flag image

folder-minus image

folder-plus image

folder image

gift image

git-branch image

git-commit image

git-merge image

git-pull-request image

github image

gitlab image

globe image

grid image

hard-drive image

hash image

headphones image

heart image

help-circle image

home image

image image

inbox image

info image

instagram image

italic image

layers image

layout image

life-buoy image

link-2 image

link image

linkedin image

list image

loader image

lock image

log-in image

log-out image

mail image

map-pin image

map image

maximize-2 image

maximize image

menu image

message-circle image

message-square image

mic-off image

mic image

minimize-2 image

minimize image

minus-circle image

minus-square image

minus image

monitor image

moon image

more-horizontal image

more-vertical image

move image

music image

navigation-2 image

navigation image

octagon image

package image

paperclip image

pause-circle image

pause image

percent image

phone-call image

phone-forwarded image

phone-incoming image

phone-missed image

phone-off image

phone-outgoing image

phone image

pie-chart image

play-circle image

play image

plus-circle image

plus-square image

plus image

pocket image

power image

printer image

radio image

refresh-ccw image

refresh-cw image

repeat image

rewind image

rotate-ccw image

rotate-cw image

rss image

save image

scissors image

search image

send image

server image

settings image

share-2 image

share image

shield-off image

shield image

shopping-bag image

shopping-cart image

shuffle image

sidebar image

skip-back image

skip-forward image

slack image

slash image

sliders image

smartphone image

speaker image

square image

star image

stop-circle image

sun image

sunrise image

sunset image

tablet image

tag image

target image

terminal image

thermometer image

thumbs-down image

thumbs-up image

toggle-left image

toggle-right image

trash-2 image

trash image

trending-down image

trending-up image

triangle image

truck image

tv image

twitter image

type image

umbrella image

underline image

unlock image

upload-cloud image

upload image

user-check image

user-minus image

user-plus image

user-x image

user image

users image

video-off image

video image

voicemail image

volume-1 image

volume-2 image

volume-x image

volume image

watch image

wifi-off image

wifi image

wind image

x-circle image

x-square image

x image

youtube image

zap-off image

zap image

zoom-in image

zoom-out image