Published on August 26, 2018

How to change the expand and collapse icons in Oxygen’s Toggle element

Sridhar Katakam

Updated on June 20, 2021

The default icons in Oxygen’s Toggle element are + and – for expanding and collapsing respectively. If you want to change these to > and ∨, follow the steps below.

Add the following CSS:

.oxy-expand-collapse-icon {
	display: flex;
	width: auto;
	height: auto;
}

.oxy-expand-collapse-icon::before,
.oxy-expand-collapse-icon::after {
	background-color: transparent;
	position: static;
	width: auto;
	height: auto;
	border-radius: 0;
}

.oxy-expand-collapse-icon::before {
	content: '';
	background: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='angle-down' class='svg-inline--fa fa-angle-down fa-w-10' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='currentColor' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
	position: static;
	top: auto;
	width: 32px;
	height: 32px;
}
tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-ocalendar-check-omagnifiercrossmenuchevron-downarrow-right