.ui-icon{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.2em;flex-shrink:0}
[data-icon]::before{content:"";display:inline-block;width:1.15em;height:1.15em;margin-right:.45em;vertical-align:-.18em;background:currentColor;mask-position:center;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}
[data-icon="book"]::before{mask-image:url("icons/book.svg");-webkit-mask-image:url("icons/book.svg")}
[data-icon="search"]::before{mask-image:url("icons/search.svg");-webkit-mask-image:url("icons/search.svg")}
[data-icon="play"]::before{mask-image:url("icons/play.svg");-webkit-mask-image:url("icons/play.svg")}
[data-icon="code"]::before{mask-image:url("icons/code.svg");-webkit-mask-image:url("icons/code.svg")}
[data-icon="leaf"]::before{mask-image:url("icons/leaf.svg");-webkit-mask-image:url("icons/leaf.svg")}
[data-icon="seed"]::before{mask-image:url("icons/seed.svg");-webkit-mask-image:url("icons/seed.svg")}
[data-icon="sprout"]::before{mask-image:url("icons/sprout.svg");-webkit-mask-image:url("icons/sprout.svg")}
[data-icon="tree"]::before{mask-image:url("icons/tree.svg");-webkit-mask-image:url("icons/tree.svg")}
[data-icon="flower"]::before{mask-image:url("icons/flower.svg");-webkit-mask-image:url("icons/flower.svg")}
[data-icon="fruit"]::before{mask-image:url("icons/fruit.svg");-webkit-mask-image:url("icons/fruit.svg")}
[data-icon="drop"]::before{mask-image:url("icons/drop.svg");-webkit-mask-image:url("icons/drop.svg")}
[data-icon="sun"]::before{mask-image:url("icons/sun.svg");-webkit-mask-image:url("icons/sun.svg")}
[data-icon="cloud"]::before{mask-image:url("icons/cloud.svg");-webkit-mask-image:url("icons/cloud.svg")}
[data-icon="heart"]::before{mask-image:url("icons/heart.svg");-webkit-mask-image:url("icons/heart.svg")}
[data-icon="gift"]::before{mask-image:url("icons/gift.svg");-webkit-mask-image:url("icons/gift.svg")}
[data-icon="star"]::before{mask-image:url("icons/star.svg");-webkit-mask-image:url("icons/star.svg")}
[data-icon="check"]::before{mask-image:url("icons/check.svg");-webkit-mask-image:url("icons/check.svg")}
[data-icon="user"]::before{mask-image:url("icons/user.svg");-webkit-mask-image:url("icons/user.svg")}
[data-icon="chart"]::before{mask-image:url("icons/chart.svg");-webkit-mask-image:url("icons/chart.svg")}
[data-icon="bulb"]::before{mask-image:url("icons/bulb.svg");-webkit-mask-image:url("icons/bulb.svg")}
[data-icon="copy"]::before{mask-image:url("icons/copy.svg");-webkit-mask-image:url("icons/copy.svg")}
[data-icon="arrow"]::before{mask-image:url("icons/arrow.svg");-webkit-mask-image:url("icons/arrow.svg")}
[data-icon="clock"]::before{mask-image:url("icons/clock.svg");-webkit-mask-image:url("icons/clock.svg")}
[data-icon="chevron"]::before{mask-image:url("icons/chevron.svg");-webkit-mask-image:url("icons/chevron.svg")}