.symbol adds css built characters ready for your iconography
<p>Edit <i class="color-primary symbol symbol-edit"></i></p>You can make a symbol appear by appending a class of symbol-{NAME} to .symbol
1p21playpausestopsquaresquare-outlinecheckboxcheckbox-inverseaddboxaddbox-inversegridlistsearchplusminuscheckclosethumbs-upthumbs-up-inversethumbs-downthumbs-down-inversestarstar-halfstar-strokekebab-verticalkebab-horizontaluploaddownloadarrow-downarrow-uparrow-leftarrow-rightarrow-double-downarrow-double-uparrow-double-leftarrow-double-rightarrow-tail-downarrow-tail-uparrow-tail-leftarrow-tail-rightcaret-downcaret-upcaret-leftcaret-righttext-centertext-lefttext-righttext-justifymappinbellbell-activehyperlinkdashcautionerrorinfosuccessstackclapcopysharefilterchartsegmentuseruser-adduser-removeexpandcollapseexpand-altcollapse-altburgerfrieswafflepencileditdeleterobotfileclipboardpaperplanetimertimecaution-inverseerror-inverseinfo-inversesuccess-inversephonecalendarcalendar-altpaperclipenvelopeenvelope-inverse
The symbols be toggled to another symbol class when a direct parent has a class of either .active or .open by just adding a class with the suffix -toggle to a symbol class (eg. symbol-{NAME}-toggle)
<ul>
<li>
when this li is active,. the caret switchs from right to left O: <i
class="color-primary symbol symbol-caret-right symbol-caret-left-toggle"
></i>
</li>
</ul>