A port of Steve Schoger's Zondicons collection
For convenience sake by default the icons will take the current color of their parent element, so the preferred way to set colors would be to set something like color: green
in CSS for the parent element.
If this is not the desired behaviour, a different fill mode can be set using the fill
attribute or fill
CSS propery of the icon.
CSS:
.parent-element {
color: red;
}
And later in your Elm code
-- this will make the color of the icon red
div [ class "parent-element" ]
[ -- no need to do anything else - the color will trickle through to the icon
Zondicons.airplane []
]
CSS:
.green-icon {
fill: green;
}
And later in your Elm code
-- this will make the color of the icon green
Zondicons.airplane [ Svg.Attributes.class "green-icon" ]
or
-- this will make the color of the icon pink
Zondicons.airplane [ Svg.Attributes.fill "pink" ]
The icons viewBox
is set to "0 0 20 20". To resize the icons set either width
or height
CSS property using either a class or an inline style. The icons' aspect ratio will be kept, so there is no need of specifying both properties.
CSS:
.big-icon {
width: 50px;
}
And later in your Elm code
-- this will render a 50px x 50px icon
Zondicons.airplane [ Svg.Attributes.class "big-icon" ]
or
-- this will render a 1rem x 1rem icon
Zondicons.airplane [ Svg.Attributes.style "height: 1rem" ]
addOutline : List (Svg.Attribute msg) -> Html msg
addSolid : List (Svg.Attribute msg) -> Html msg
adjust : List (Svg.Attribute msg) -> Html msg
airplane : List (Svg.Attribute msg) -> Html msg
album : List (Svg.Attribute msg) -> Html msg
alignCenter : List (Svg.Attribute msg) -> Html msg
alignJustified : List (Svg.Attribute msg) -> Html msg
alignLeft : List (Svg.Attribute msg) -> Html msg
alignRight : List (Svg.Attribute msg) -> Html msg
anchor : List (Svg.Attribute msg) -> Html msg
announcement : List (Svg.Attribute msg) -> Html msg
apparel : List (Svg.Attribute msg) -> Html msg
arrowDown : List (Svg.Attribute msg) -> Html msg
arrowLeft : List (Svg.Attribute msg) -> Html msg
arrowOutlineDown : List (Svg.Attribute msg) -> Html msg
arrowOutlineLeft : List (Svg.Attribute msg) -> Html msg
arrowOutlineRight : List (Svg.Attribute msg) -> Html msg
arrowOutlineUp : List (Svg.Attribute msg) -> Html msg
arrowRight : List (Svg.Attribute msg) -> Html msg
arrowThickDown : List (Svg.Attribute msg) -> Html msg
arrowThickLeft : List (Svg.Attribute msg) -> Html msg
arrowThickRight : List (Svg.Attribute msg) -> Html msg
arrowThickUp : List (Svg.Attribute msg) -> Html msg
arrowThinDown : List (Svg.Attribute msg) -> Html msg
arrowThinLeft : List (Svg.Attribute msg) -> Html msg
arrowThinRight : List (Svg.Attribute msg) -> Html msg
arrowThinUp : List (Svg.Attribute msg) -> Html msg
arrowUp : List (Svg.Attribute msg) -> Html msg
artist : List (Svg.Attribute msg) -> Html msg
atSymbol : List (Svg.Attribute msg) -> Html msg
attachment : List (Svg.Attribute msg) -> Html msg
backspace : List (Svg.Attribute msg) -> Html msg
backwardStep : List (Svg.Attribute msg) -> Html msg
backward : List (Svg.Attribute msg) -> Html msg
badge : List (Svg.Attribute msg) -> Html msg
batteryFull : List (Svg.Attribute msg) -> Html msg
batteryHalf : List (Svg.Attribute msg) -> Html msg
batteryLow : List (Svg.Attribute msg) -> Html msg
beverage : List (Svg.Attribute msg) -> Html msg
block : List (Svg.Attribute msg) -> Html msg
bluetooth : List (Svg.Attribute msg) -> Html msg
bolt : List (Svg.Attribute msg) -> Html msg
bookReference : List (Svg.Attribute msg) -> Html msg
bookmarkCopy2 : List (Svg.Attribute msg) -> Html msg
bookmarkCopy3 : List (Svg.Attribute msg) -> Html msg
bookmarkOutlineAdd : List (Svg.Attribute msg) -> Html msg
bookmarkOutline : List (Svg.Attribute msg) -> Html msg
bookmark : List (Svg.Attribute msg) -> Html msg
borderAll : List (Svg.Attribute msg) -> Html msg
borderBottom : List (Svg.Attribute msg) -> Html msg
borderHorizontal : List (Svg.Attribute msg) -> Html msg
borderInner : List (Svg.Attribute msg) -> Html msg
borderLeft : List (Svg.Attribute msg) -> Html msg
borderNone : List (Svg.Attribute msg) -> Html msg
borderOuter : List (Svg.Attribute msg) -> Html msg
borderRight : List (Svg.Attribute msg) -> Html msg
borderTop : List (Svg.Attribute msg) -> Html msg
borderVertical : List (Svg.Attribute msg) -> Html msg
box : List (Svg.Attribute msg) -> Html msg
brightnessDown : List (Svg.Attribute msg) -> Html msg
brightnessUp : List (Svg.Attribute msg) -> Html msg
browserWindowNew : List (Svg.Attribute msg) -> Html msg
browserWindowOpen : List (Svg.Attribute msg) -> Html msg
browserWindow : List (Svg.Attribute msg) -> Html msg
bug : List (Svg.Attribute msg) -> Html msg
buoy : List (Svg.Attribute msg) -> Html msg
calculator : List (Svg.Attribute msg) -> Html msg
calendar : List (Svg.Attribute msg) -> Html msg
camera : List (Svg.Attribute msg) -> Html msg
chartBar : List (Svg.Attribute msg) -> Html msg
chartPie : List (Svg.Attribute msg) -> Html msg
chart : List (Svg.Attribute msg) -> Html msg
chatBubbleDots : List (Svg.Attribute msg) -> Html msg
checkmarkOutline : List (Svg.Attribute msg) -> Html msg
checkmark : List (Svg.Attribute msg) -> Html msg
cheveronDown : List (Svg.Attribute msg) -> Html msg
cheveronLeft : List (Svg.Attribute msg) -> Html msg
cheveronOutlineDown : List (Svg.Attribute msg) -> Html msg
cheveronOutlineLeft : List (Svg.Attribute msg) -> Html msg
cheveronOutlineRight : List (Svg.Attribute msg) -> Html msg
cheveronOutlineUp : List (Svg.Attribute msg) -> Html msg
cheveronRight : List (Svg.Attribute msg) -> Html msg
cheveronUp : List (Svg.Attribute msg) -> Html msg
clipboard : List (Svg.Attribute msg) -> Html msg
closeOutline : List (Svg.Attribute msg) -> Html msg
closeSolid : List (Svg.Attribute msg) -> Html msg
close : List (Svg.Attribute msg) -> Html msg
cloudUpload : List (Svg.Attribute msg) -> Html msg
cloud : List (Svg.Attribute msg) -> Html msg
code : List (Svg.Attribute msg) -> Html msg
coffee : List (Svg.Attribute msg) -> Html msg
cog : List (Svg.Attribute msg) -> Html msg
colorPalette : List (Svg.Attribute msg) -> Html msg
compose : List (Svg.Attribute msg) -> Html msg
computerDesktop : List (Svg.Attribute msg) -> Html msg
computerLaptop : List (Svg.Attribute msg) -> Html msg
conversation : List (Svg.Attribute msg) -> Html msg
copy : List (Svg.Attribute msg) -> Html msg
creditCard : List (Svg.Attribute msg) -> Html msg
currencyDollar : List (Svg.Attribute msg) -> Html msg
dashboard : List (Svg.Attribute msg) -> Html msg
dateAdd : List (Svg.Attribute msg) -> Html msg
dialPad : List (Svg.Attribute msg) -> Html msg
directions : List (Svg.Attribute msg) -> Html msg
documentAdd : List (Svg.Attribute msg) -> Html msg
document : List (Svg.Attribute msg) -> Html msg
dotsHorizontalDouble : List (Svg.Attribute msg) -> Html msg
dotsHorizontalTriple : List (Svg.Attribute msg) -> Html msg
download : List (Svg.Attribute msg) -> Html msg
duplicate : List (Svg.Attribute msg) -> Html msg
editCopy : List (Svg.Attribute msg) -> Html msg
editCrop : List (Svg.Attribute msg) -> Html msg
editCut : List (Svg.Attribute msg) -> Html msg
editPencil : List (Svg.Attribute msg) -> Html msg
education : List (Svg.Attribute msg) -> Html msg
envelope : List (Svg.Attribute msg) -> Html msg
exclamationOutline : List (Svg.Attribute msg) -> Html msg
exclamationSolid : List (Svg.Attribute msg) -> Html msg
explore : List (Svg.Attribute msg) -> Html msg
factory : List (Svg.Attribute msg) -> Html msg
fastForward : List (Svg.Attribute msg) -> Html msg
fastRewind : List (Svg.Attribute msg) -> Html msg
film : List (Svg.Attribute msg) -> Html msg
filter : List (Svg.Attribute msg) -> Html msg
flag : List (Svg.Attribute msg) -> Html msg
flashlight : List (Svg.Attribute msg) -> Html msg
folderOutlineAdd : List (Svg.Attribute msg) -> Html msg
folderOutline : List (Svg.Attribute msg) -> Html msg
folder : List (Svg.Attribute msg) -> Html msg
formatBold : List (Svg.Attribute msg) -> Html msg
formatFontSize : List (Svg.Attribute msg) -> Html msg
formatItalic : List (Svg.Attribute msg) -> Html msg
formatTextSize : List (Svg.Attribute msg) -> Html msg
formatUnderline : List (Svg.Attribute msg) -> Html msg
forwardStep : List (Svg.Attribute msg) -> Html msg
forward : List (Svg.Attribute msg) -> Html msg
gift : List (Svg.Attribute msg) -> Html msg
globe : List (Svg.Attribute msg) -> Html msg
handStop : List (Svg.Attribute msg) -> Html msg
hardDrive : List (Svg.Attribute msg) -> Html msg
headphones : List (Svg.Attribute msg) -> Html msg
heart : List (Svg.Attribute msg) -> Html msg
home : List (Svg.Attribute msg) -> Html msg
hot : List (Svg.Attribute msg) -> Html msg
hourGlass : List (Svg.Attribute msg) -> Html msg
inboxCheck : List (Svg.Attribute msg) -> Html msg
inboxDownload : List (Svg.Attribute msg) -> Html msg
inboxFull : List (Svg.Attribute msg) -> Html msg
inbox : List (Svg.Attribute msg) -> Html msg
indentDecrease : List (Svg.Attribute msg) -> Html msg
indentIncrease : List (Svg.Attribute msg) -> Html msg
informationOutline : List (Svg.Attribute msg) -> Html msg
informationSolid : List (Svg.Attribute msg) -> Html msg
key : List (Svg.Attribute msg) -> Html msg
keyboard : List (Svg.Attribute msg) -> Html msg
layers : List (Svg.Attribute msg) -> Html msg
library : List (Svg.Attribute msg) -> Html msg
lightBulb : List (Svg.Attribute msg) -> Html msg
link : List (Svg.Attribute msg) -> Html msg
listAdd : List (Svg.Attribute msg) -> Html msg
listBullet : List (Svg.Attribute msg) -> Html msg
list : List (Svg.Attribute msg) -> Html msg
loadBalancer : List (Svg.Attribute msg) -> Html msg
locationCurrent : List (Svg.Attribute msg) -> Html msg
locationFood : List (Svg.Attribute msg) -> Html msg
locationGasStation : List (Svg.Attribute msg) -> Html msg
locationHotel : List (Svg.Attribute msg) -> Html msg
locationMarina : List (Svg.Attribute msg) -> Html msg
locationPark : List (Svg.Attribute msg) -> Html msg
locationRestroom : List (Svg.Attribute msg) -> Html msg
locationShopping : List (Svg.Attribute msg) -> Html msg
location : List (Svg.Attribute msg) -> Html msg
lockClosed : List (Svg.Attribute msg) -> Html msg
lockOpen : List (Svg.Attribute msg) -> Html msg
map : List (Svg.Attribute msg) -> Html msg
menu : List (Svg.Attribute msg) -> Html msg
mic : List (Svg.Attribute msg) -> Html msg
minusOutline : List (Svg.Attribute msg) -> Html msg
minusSolid : List (Svg.Attribute msg) -> Html msg
mobileDevices : List (Svg.Attribute msg) -> Html msg
moodHappyOutline : List (Svg.Attribute msg) -> Html msg
moodHappySolid : List (Svg.Attribute msg) -> Html msg
moodNeutralOutline : List (Svg.Attribute msg) -> Html msg
moodNeutralSolid : List (Svg.Attribute msg) -> Html msg
moodSadOutline : List (Svg.Attribute msg) -> Html msg
moodSadSolid : List (Svg.Attribute msg) -> Html msg
mouse : List (Svg.Attribute msg) -> Html msg
musicAlbum : List (Svg.Attribute msg) -> Html msg
musicArtist : List (Svg.Attribute msg) -> Html msg
musicNotes : List (Svg.Attribute msg) -> Html msg
musicPlaylist : List (Svg.Attribute msg) -> Html msg
navigationMore : List (Svg.Attribute msg) -> Html msg
network : List (Svg.Attribute msg) -> Html msg
newsPaper : List (Svg.Attribute msg) -> Html msg
notification : List (Svg.Attribute msg) -> Html msg
notificationsOutline : List (Svg.Attribute msg) -> Html msg
notifications : List (Svg.Attribute msg) -> Html msg
paste : List (Svg.Attribute msg) -> Html msg
pauseOutline : List (Svg.Attribute msg) -> Html msg
pauseSolid : List (Svg.Attribute msg) -> Html msg
pause : List (Svg.Attribute msg) -> Html msg
penTool : List (Svg.Attribute msg) -> Html msg
phone : List (Svg.Attribute msg) -> Html msg
photo : List (Svg.Attribute msg) -> Html msg
phpElephant : List (Svg.Attribute msg) -> Html msg
pin : List (Svg.Attribute msg) -> Html msg
playOutline : List (Svg.Attribute msg) -> Html msg
play : List (Svg.Attribute msg) -> Html msg
playlist : List (Svg.Attribute msg) -> Html msg
plugin : List (Svg.Attribute msg) -> Html msg
portfolio : List (Svg.Attribute msg) -> Html msg
printer : List (Svg.Attribute msg) -> Html msg
pylon : List (Svg.Attribute msg) -> Html msg
question : List (Svg.Attribute msg) -> Html msg
queue : List (Svg.Attribute msg) -> Html msg
radarCopy2 : List (Svg.Attribute msg) -> Html msg
radar : List (Svg.Attribute msg) -> Html msg
radio : List (Svg.Attribute msg) -> Html msg
refresh : List (Svg.Attribute msg) -> Html msg
reload : List (Svg.Attribute msg) -> Html msg
replyAll : List (Svg.Attribute msg) -> Html msg
reply : List (Svg.Attribute msg) -> Html msg
repost : List (Svg.Attribute msg) -> Html msg
saveDisk : List (Svg.Attribute msg) -> Html msg
screenFull : List (Svg.Attribute msg) -> Html msg
search : List (Svg.Attribute msg) -> Html msg
send : List (Svg.Attribute msg) -> Html msg
servers : List (Svg.Attribute msg) -> Html msg
share01 : List (Svg.Attribute msg) -> Html msg
shareAlt : List (Svg.Attribute msg) -> Html msg
share : List (Svg.Attribute msg) -> Html msg
shield : List (Svg.Attribute msg) -> Html msg
shoppingCart : List (Svg.Attribute msg) -> Html msg
showSidebar : List (Svg.Attribute msg) -> Html msg
shuffle : List (Svg.Attribute msg) -> Html msg
standBy : List (Svg.Attribute msg) -> Html msg
starFull : List (Svg.Attribute msg) -> Html msg
station : List (Svg.Attribute msg) -> Html msg
stepBackward : List (Svg.Attribute msg) -> Html msg
stepForward : List (Svg.Attribute msg) -> Html msg
stethoscope : List (Svg.Attribute msg) -> Html msg
storeFront : List (Svg.Attribute msg) -> Html msg
strokeWidth : List (Svg.Attribute msg) -> Html msg
subdirectoryLeft : List (Svg.Attribute msg) -> Html msg
subdirectoryRight : List (Svg.Attribute msg) -> Html msg
swap : List (Svg.Attribute msg) -> Html msg
tablet : List (Svg.Attribute msg) -> Html msg
tag : List (Svg.Attribute msg) -> Html msg
target : List (Svg.Attribute msg) -> Html msg
textBox : List (Svg.Attribute msg) -> Html msg
textDecoration : List (Svg.Attribute msg) -> Html msg
thermometer : List (Svg.Attribute msg) -> Html msg
thumbsDown : List (Svg.Attribute msg) -> Html msg
thumbsUp : List (Svg.Attribute msg) -> Html msg
ticket : List (Svg.Attribute msg) -> Html msg
time : List (Svg.Attribute msg) -> Html msg
timer : List (Svg.Attribute msg) -> Html msg
toolsCopy : List (Svg.Attribute msg) -> Html msg
translate : List (Svg.Attribute msg) -> Html msg
trash : List (Svg.Attribute msg) -> Html msg
travelBus : List (Svg.Attribute msg) -> Html msg
travelCar : List (Svg.Attribute msg) -> Html msg
travelCase : List (Svg.Attribute msg) -> Html msg
travelTaxiCab : List (Svg.Attribute msg) -> Html msg
travelTrain : List (Svg.Attribute msg) -> Html msg
travelWalk : List (Svg.Attribute msg) -> Html msg
travel : List (Svg.Attribute msg) -> Html msg
trophy : List (Svg.Attribute msg) -> Html msg
tuning : List (Svg.Attribute msg) -> Html msg
upload : List (Svg.Attribute msg) -> Html msg
usb : List (Svg.Attribute msg) -> Html msg
userAdd : List (Svg.Attribute msg) -> Html msg
userGroup : List (Svg.Attribute msg) -> Html msg
userSolidCircle : List (Svg.Attribute msg) -> Html msg
userSolidSquare : List (Svg.Attribute msg) -> Html msg
user : List (Svg.Attribute msg) -> Html msg
vector : List (Svg.Attribute msg) -> Html msg
videoCamera : List (Svg.Attribute msg) -> Html msg
viewCarousel : List (Svg.Attribute msg) -> Html msg
viewColumn : List (Svg.Attribute msg) -> Html msg
viewHide : List (Svg.Attribute msg) -> Html msg
viewList : List (Svg.Attribute msg) -> Html msg
viewShow : List (Svg.Attribute msg) -> Html msg
viewTile : List (Svg.Attribute msg) -> Html msg
volumeDown : List (Svg.Attribute msg) -> Html msg
volumeMute : List (Svg.Attribute msg) -> Html msg
volumeOff : List (Svg.Attribute msg) -> Html msg
volumeUp : List (Svg.Attribute msg) -> Html msg
wallet : List (Svg.Attribute msg) -> Html msg
watch : List (Svg.Attribute msg) -> Html msg
windowNew : List (Svg.Attribute msg) -> Html msg
windowOpen : List (Svg.Attribute msg) -> Html msg
window : List (Svg.Attribute msg) -> Html msg
wrench : List (Svg.Attribute msg) -> Html msg
yinYang : List (Svg.Attribute msg) -> Html msg
zoomIn : List (Svg.Attribute msg) -> Html msg
zoomOut : List (Svg.Attribute msg) -> Html msg