.icon {
	display: inline-block;
	vertical-align: middle;
	color: currentcolor;
	&.icon--has-description {
		display: inline-flex;
		flex-direction: column;
	}
	.svg-icon{
		width: 24px;
		height: 24px;
		margin: auto;
	}
	.svg {
		width: 100%;
		height: 100%;
		fill: currentcolor;
		pointer-events: none;
	}
	.svg-text,
	.svg-icon {
		display: inline-block;
		vertical-align: middle;
	}
	.svg-fallback {
		display: none;
	}
	&--mirrored {
		transform: rotate(180deg);
	}
}

.icon__description {
	display: block;
	text-align: center;
	color: inherit;
	margin-top: unit(1px / @root-font-size, em);;
	font-size: unit(10px / @root-font-size, em);
	line-height: 1em;
}

.icon__description,
.svg-text {
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 100%;
}

.not-supports-svg {
	.svg-icon {
		display: none;
	}
	.svg-fallback {
		display: inline-block;
	}
}