zotero/scss/components/_icons.scss

.icon > svg, .icon > img {
	width: 16px;
}

.icon-bg {
	width: 16px;
	height: 16px;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	vertical-align: middle;
}

.icon-css {
	display: inline-block;
	vertical-align: middle;
}

.icon.icon-downchevron {
	width: 7px !important;
}

.icon {
	-moz-appearance: none !important;
}

.icon-16 {
	width: 16px;
	height: 16px;
}

.icon-8 {
	width: 8px;
	height: 8px;
}

$-icons: (
	attachment,
	chevron-6,
	filter,
	note,
);

@each $icon in $-icons {
	.icon-#{$icon} {
		@include color-scheme using($color) {
			background: url('chrome://zotero/skin/#{$icon}.svg') content-box no-repeat;
			-moz-context-properties: fill, fill-opacity;
		}
	}
}