<span *ngIf="name?.length" [ngClass]="icnSize + ' ' + icnType">
	<i [ngClass]="name"></i>
</span>

./icon.component.scss

@import 'css/style';

.primary {
	--icn-color: var(--vcm-color-primary);
}

.success {
	--icn-color: var(--vcm-color-success);
}

.danger {
	--icn-color: var(--vcm-color-danger);
}

.white {
	--icn-color: white;
}

.small {
	--icon-size: 20px;
}

.medium {
	--icon-size: 31px;
}

.big {
	--icon-size: 35px;
}

@include lg-size {
	:host {
		--icon-size: 23px;
	}

	.small {
		--icon-size: 19px;
	}

	.medium {
		--icon-size: 30px;
	}

	.big {
		--icon-size: 33px
	}
}

@include md-size {
	:host {
		--icon-size: 21px;
	}

	.small {
		--icon-size: 17px;
	}

	.medium {
		--icon-size: 28px;
	}

	.big {
		--icon-size: 31px;
	}
}

@include sm-size {
	:host {
		--icon-size: 19px;
	}

	.small {
		--icon-size: 15px;
	}

	.medium {
		--icon-size: 26px;
	}

	.big {
		--icon-size: 29px;
	}
}

:host {
	@extend %flexed;
	align-items: center;
	justify-content: center;
}

:host ::ng-deep {
	span {
		@extend %flexed;
		align-items: center;
		justify-content: center;
		width: var(--icon-size, 24px);
		height: var(--icon-size, 24px);
	}
}

@font-face {
	font-family: 'vcm-icns';
	src: url('~/assets/icons/vcm-icns.eot?1wi5pb');
	src: url('~/assets/icons/vcm-icns.eot?1wi5pb#iefix') format('embedded-opentype'),
		url('~/assets/icons/vcm-icns.ttf?1wi5pb') format('truetype'),
		url('~/assets/icons/vcm-icns.woff?1wi5pb') format('woff'),
		url('~/assets/icons/vcm-icns.svg?1wi5pb#vcm-icns') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

i {
	&:before {
		color: var(--icn-color, var(--vcm-color-grey));
	}

	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'vcm-icns' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: var(--icon-size, 20px);

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.vcm-activity-outline:before {
	content: "\e900";
}

.vcm-air-conditioner-outline:before {
	content: "\e901";
}

.vcm-alert-circle-outline:before {
	content: "\e902";
}

.vcm-alert-triangle-outline:before {
	content: "\e903";
}

.vcm-archive-outline:before {
	content: "\e904";
}

.vcm-area-outline:before {
	content: "\e905";
}

.vcm-arrow-back-outline:before {
	content: "\e906";
}

.vcm-arrow-circle-down-outline:before {
	content: "\e907";
}

.vcm-arrow-circle-left-outline:before {
	content: "\e908";
}

.vcm-arrow-circle-right-outline:before {
	content: "\e909";
}

.vcm-arrow-circle-up-outline:before {
	content: "\e90a";
}

.vcm-arrow-down-outline:before {
	content: "\e90b";
}

.vcm-arrow-downward-outline:before {
	content: "\e90c";
}

.vcm-arrow-forward-outline:before {
	content: "\e90d";
}

.vcm-arrowhead-down-outline:before {
	content: "\e90e";
}

.vcm-arrowhead-left-outline:before {
	content: "\e90f";
}

.vcm-arrowhead-right-outline:before {
	content: "\e910";
}

.vcm-arrowhead-up-outline:before {
	content: "\e911";
}

.vcm-arrow-ios-back-outline:before {
	content: "\e912";
}

.vcm-arrow-ios-downward-outline:before {
	content: "\e913";
}

.vcm-arrow-ios-forward-outline:before {
	content: "\e914";
}

.vcm-arrow-ios-upward-outline:before {
	content: "\e915";
}

.vcm-arrow-left-outline:before {
	content: "\e916";
}

.vcm-arrow-right-outline:before {
	content: "\e917";
}

.vcm-arrow-up-outline:before {
	content: "\e918";
}

.vcm-arrow-upward-outline:before {
	content: "\e919";
}

.vcm-at-outline:before {
	content: "\e91a";
}

.vcm-attach-2-outline:before {
	content: "\e91b";
}

.vcm-attach-outline:before {
	content: "\e91c";
}

.vcm-award-outline:before {
	content: "\e91d";
}

.vcm-backspace-outline:before {
	content: "\e91e";
}

.vcm-bar-chart-2-outline:before {
	content: "\e91f";
}

.vcm-bar-chart-outline:before {
	content: "\e920";
}

.vcm-bath-outline:before {
	content: "\e921";
}

.vcm-battery-outline:before {
	content: "\e922";
}

.vcm-bed-outline:before {
	content: "\e923";
}

.vcm-behance-outline:before {
	content: "\e924";
}

.vcm-bell-off-outline:before {
	content: "\e925";
}

.vcm-bell-outline:before {
	content: "\e926";
}

.vcm-block-list-outline:before {
	content: "\e927";
}

.vcm-bluetooth-outline:before {
	content: "\e928";
}

.vcm-bookmark-outline:before {
	content: "\e929";
}

.vcm-book-open-outline:before {
	content: "\e92a";
}

.vcm-book-outline:before {
	content: "\e92b";
}

.vcm-briefcase-outline:before {
	content: "\e92c";
}

.vcm-browser-outline:before {
	content: "\e92d";
}

.vcm-brush-outline:before {
	content: "\e92e";
}

.vcm-bulb-outline:before {
	content: "\e92f";
}

.vcm-calendar-outline:before {
	content: "\e930";
}

.vcm-camera-outline:before {
	content: "\e931";
}

.vcm-car-door-outline:before {
	content: "\e932";
}

.vcm-car-outline:before {
	content: "\e933";
}

.vcm-cast-outline:before {
	content: "\e934";
}

.vcm-charging-outline:before {
	content: "\e935";
}

.vcm-checkmark-circle-2-outline:before {
	content: "\e936";
}

.vcm-checkmark-circle-outline:before {
	content: "\e937";
}

.vcm-checkmark-outline:before {
	content: "\e938";
}

.vcm-checkmark-square-2-outline:before {
	content: "\e939";
}

.vcm-checkmark-square-outline:before {
	content: "\e93a";
}

.vcm-chevron-down-outline:before {
	content: "\e93b";
}

.vcm-chevron-left-outline:before {
	content: "\e93c";
}

.vcm-chevron-right-outline:before {
	content: "\e93d";
}

.vcm-chevron-up-outline:before {
	content: "\e93e";
}

.vcm-clipboard-outline:before {
	content: "\e93f";
}

.vcm-clock-outline:before {
	content: "\e940";
}

.vcm-close-circle-outline:before {
	content: "\e941";
}

.vcm-close-outline:before {
	content: "\e942";
}

.vcm-close-square-outline:before {
	content: "\e943";
}

.vcm-cloud-download-outline:before {
	content: "\e944";
}

.vcm-cloud-upload-outline:before {
	content: "\e945";
}

.vcm-code-download-outline:before {
	content: "\e946";
}

.vcm-code-outline:before {
	content: "\e947";
}

.vcm-collapse-outline:before {
	content: "\e948";
}

.vcm-color-palette-outline:before {
	content: "\e949";
}

.vcm-color-picker-outline:before {
	content: "\e94a";
}

.vcm-compass-outline:before {
	content: "\e94b";
}

.vcm-condition-outline:before {
	content: "\e94c";
}

.vcm-conformity-outline:before {
	content: "\e94d";
}

.vcm-control-outline:before {
	content: "\e94e";
}

.vcm-copy-outline:before {
	content: "\e94f";
}

.vcm-corner-down-left-outline:before {
	content: "\e950";
}

.vcm-corner-down-right-outline:before {
	content: "\e951";
}

.vcm-corner-left-down-outline:before {
	content: "\e952";
}

.vcm-corner-left-up-outline:before {
	content: "\e953";
}

.vcm-corner-right-down-outline:before {
	content: "\e954";
}

.vcm-corner-right-up-outline:before {
	content: "\e955";
}

.vcm-corner-up-left-outline:before {
	content: "\e956";
}

.vcm-corner-up-right-outline:before {
	content: "\e957";
}

.vcm-credit-card-outline:before {
	content: "\e958";
}

.vcm-crop-outline:before {
	content: "\e959";
}

.vcm-cube-outline:before {
	content: "\e95a";
}

.vcm-diagonal-arrow-left-down-outline:before {
	content: "\e95b";
}

.vcm-diagonal-arrow-left-up-outline:before {
	content: "\e95c";
}

.vcm-diagonal-arrow-right-down-outline:before {
	content: "\e95d";
}

.vcm-diagonal-arrow-right-up-outline:before {
	content: "\e95e";
}

.vcm-done-all-outline:before {
	content: "\e95f";
}

.vcm-download-outline:before {
	content: "\e960";
}

.vcm-drag-order-outline:before {
	content: "\e961";
}

.vcm-drag-outline:before {
	content: "\e962";
}

.vcm-droplet-off-outline:before {
	content: "\e963";
}

.vcm-droplet-outline:before {
	content: "\e964";
}

.vcm-edit-2-outline:before {
	content: "\e965";
}

.vcm-edit-outline:before {
	content: "\e966";
}

.vcm-email-outline:before {
	content: "\e967";
}

.vcm-expand-outline:before {
	content: "\e968";
}

.vcm-export-outline:before {
	content: "\e969";
}

.vcm-external-link-outline:before {
	content: "\e96a";
}

.vcm-eye-off-2-outline:before {
	content: "\e96b";
}

.vcm-eye-off-outline:before {
	content: "\e96c";
}

.vcm-eye-outline:before {
	content: "\e96d";
}

.vcm-facebook-outline:before {
	content: "\e96e";
}

.vcm-file-add-outline:before {
	content: "\e96f";
}

.vcm-file-outline:before {
	content: "\e970";
}

.vcm-file-remove-outline:before {
	content: "\e971";
}

.vcm-file-text-outline:before {
	content: "\e972";
}

.vcm-film-outline:before {
	content: "\e973";
}

.vcm-flag-outline:before {
	content: "\e974";
}

.vcm-flash-off-outline:before {
	content: "\e975";
}

.vcm-flash-outline:before {
	content: "\e976";
}

.vcm-flip-2-outline:before {
	content: "\e977";
}

.vcm-flip-outline:before {
	content: "\e978";
}

.vcm-folder-add-outline:before {
	content: "\e979";
}

.vcm-folder-outline:before {
	content: "\e97a";
}

.vcm-folder-remove-outline:before {
	content: "\e97b";
}

.vcm-funnel-outline:before {
	content: "\e97c";
}

.vcm-generate-pass-outline:before {
	content: "\e97d";
}

.vcm-gift-outline:before {
	content: "\e97e";
}

.vcm-github-outline:before {
	content: "\e97f";
}

.vcm-globe-2-outline:before {
	content: "\e980";
}

.vcm-globe-outline:before {
	content: "\e981";
}

.vcm-google-outline:before {
	content: "\e982";
}

.vcm-grid-outline:before {
	content: "\e983";
}

.vcm-hard-drive-outline:before {
	content: "\e984";
}

.vcm-hash-outline:before {
	content: "\e985";
}

.vcm-headphones-outline:before {
	content: "\e986";
}

.vcm-heart-outline:before {
	content: "\e987";
}

.vcm-home-outline:before {
	content: "\e988";
}

.vcm-image-outline:before {
	content: "\e989";
}

.vcm-inbox-outline:before {
	content: "\e98a";
}

.vcm-info-outline:before {
	content: "\e98b";
}

.vcm-keypad-outline:before {
	content: "\e98c";
}

.vcm-layers-outline:before {
	content: "\e98d";
}

.vcm-layout-outline:before {
	content: "\e98e";
}

.vcm-link-2-outline:before {
	content: "\e98f";
}

.vcm-linkedin-outline:before {
	content: "\e990";
}

.vcm-link-outline:before {
	content: "\e991";
}

.vcm-list-outline:before {
	content: "\e992";
}

.vcm-loader-outline:before {
	content: "\e993";
}

.vcm-lock-outline:before {
	content: "\e994";
}

.vcm-log-in-outline:before {
	content: "\e995";
}

.vcm-log-out-outline:before {
	content: "\e996";
}

.vcm-map-outline:before {
	content: "\e997";
}

.vcm-maximize-outline:before {
	content: "\e998";
}

.vcm-menu-2-outline:before {
	content: "\e999";
}

.vcm-menu-arrow-outline:before {
	content: "\e99a";
}

.vcm-menu-outline:before {
	content: "\e99b";
}

.vcm-message-circle-outline:before {
	content: "\e99c";
}

.vcm-message-square-outline:before {
	content: "\e99d";
}

.vcm-mic-off-outline:before {
	content: "\e99e";
}

.vcm-mic-outline:before {
	content: "\e99f";
}

.vcm-minimize-outline:before {
	content: "\e9a0";
}

.vcm-minus-circle-outline:before {
	content: "\e9a1";
}

.vcm-minus-outline:before {
	content: "\e9a2";
}

.vcm-minus-square-outline:before {
	content: "\e9a3";
}

.vcm-monitor-outline:before {
	content: "\e9a4";
}

.vcm-moon-outline:before {
	content: "\e9a5";
}

.vcm-more-horizontal-outline:before {
	content: "\e9a6";
}

.vcm-more-vertical-outline:before {
	content: "\e9a7";
}

.vcm-move-outline:before {
	content: "\e9a8";
}

.vcm-music-outline:before {
	content: "\e9a9";
}

.vcm-navigation-2-outline:before {
	content: "\e9aa";
}

.vcm-navigation-outline:before {
	content: "\e9ab";
}

.vcm-npm-outline:before {
	content: "\e9ac";
}

.vcm-numbers-outline:before {
	content: "\e9ad";
}

.vcm-options-2-outline:before {
	content: "\e9ae";
}

.vcm-options-outline:before {
	content: "\e9af";
}

.vcm-pantone-outline:before {
	content: "\e9b0";
}

.vcm-paper-plane-outline:before {
	content: "\e9b1";
}

.vcm-parking-outline:before {
	content: "\e9b2";
}

.vcm-pause-circle-outline:before {
	content: "\e9b3";
}

.vcm-people-outline:before {
	content: "\e9b4";
}

.vcm-percent-outline:before {
	content: "\e9b5";
}

.vcm-person-add-outline:before {
	content: "\e9b6";
}

.vcm-person-delete-outline:before {
	content: "\e9b7";
}

.vcm-person-done-outline:before {
	content: "\e9b8";
}

.vcm-person-outline:before {
	content: "\e9b9";
}

.vcm-person-remove-outline:before {
	content: "\e9ba";
}

.vcm-phone-call-outline:before {
	content: "\e9bb";
}

.vcm-phone-missed-outline:before {
	content: "\e9bc";
}

.vcm-phone-off-outline:before {
	content: "\e9bd";
}

.vcm-phone-outline:before {
	content: "\e9be";
}

.vcm-pie-chart-outline:before {
	content: "\e9bf";
}

.vcm-pin-outline:before {
	content: "\e9c0";
}

.vcm-play-circle-outline:before {
	content: "\e9c1";
}

.vcm-plus-circle-outline:before {
	content: "\e9c2";
}

.vcm-plus-outline:before {
	content: "\e9c3";
}

.vcm-plus-square-outline:before {
	content: "\e9c4";
}

.vcm-power-outline:before {
	content: "\e9c5";
}

.vcm-pricetags-outline:before {
	content: "\e9c6";
}

.vcm-printer-outline:before {
	content: "\e9c7";
}

.vcm-question-mark-circle-outline:before {
	content: "\e9c8";
}

.vcm-question-mark-outline:before {
	content: "\e9c9";
}

.vcm-radio-button-off-outline:before {
	content: "\e9ca";
}

.vcm-radio-button-on-outline:before {
	content: "\e9cb";
}

.vcm-radio-outline:before {
	content: "\e9cc";
}

.vcm-recording-outline:before {
	content: "\e9cd";
}

.vcm-refresh-outline:before {
	content: "\e9ce";
}

.vcm-releve-outline:before {
	content: "\e9cf";
}

.vcm-remark-outline:before {
	content: "\e9d0";
}

.vcm-repeat-outline:before {
	content: "\e9d1";
}

.vcm-reserve-outline:before {
	content: "\e9d2";
}

.vcm-rewind-left-outline:before {
	content: "\e9d3";
}

.vcm-rewind-right-outline:before {
	content: "\e9d4";
}

.vcm-save-outline:before {
	content: "\e9d5";
}

.vcm-scissors-outline:before {
	content: "\e9d6";
}

.vcm-search-outline:before {
	content: "\e9d7";
}

.vcm-section-outline:before {
	content: "\e9d8";
}

.vcm-settings-2-outline:before {
	content: "\e9d9";
}

.vcm-settings-outline:before {
	content: "\e9da";
}

.vcm-shake-outline:before {
	content: "\e9db";
}

.vcm-share-outline:before {
	content: "\e9dc";
}

.vcm-sheet-outline:before {
	content: "\e9dd";
}

.vcm-shield-off-outline:before {
	content: "\e9de";
}

.vcm-shield-outline:before {
	content: "\e9df";
}

.vcm-shopping-bag-outline:before {
	content: "\e9e0";
}

.vcm-shopping-cart-outline:before {
	content: "\e9e1";
}

.vcm-shuffle-2-outline:before {
	content: "\e9e2";
}

.vcm-shuffle-outline:before {
	content: "\e9e3";
}

.vcm-skip-back-outline:before {
	content: "\e9e4";
}

.vcm-skip-forward-outline:before {
	content: "\e9e5";
}

.vcm-slash-outline:before {
	content: "\e9e6";
}

.vcm-smartphone-outline:before {
	content: "\e9e7";
}

.vcm-speaker-outline:before {
	content: "\e9e8";
}

.vcm-speed-outline:before {
	content: "\e9e9";
}

.vcm-square-outline:before {
	content: "\e9ea";
}

.vcm-star-outline:before {
	content: "\e9eb";
}

.vcm-stop-circle-outline:before {
	content: "\e9ec";
}

.vcm-sun-outline:before {
	content: "\e9ed";
}

.vcm-swap-outline:before {
	content: "\e9ee";
}

.vcm-swimming-pool-outline:before {
	content: "\e9ef";
}

.vcm-sync-outline:before {
	content: "\e9f0";
}

.vcm-text-outline:before {
	content: "\e9f1";
}

.vcm-thermometer-minus-outline:before {
	content: "\e9f2";
}

.vcm-thermometer-outline:before {
	content: "\e9f3";
}

.vcm-thermometer-plus-outline:before {
	content: "\e9f4";
}

.vcm-toggle-left-outline:before {
	content: "\e9f5";
}

.vcm-toggle-right-outline:before {
	content: "\e9f6";
}

.vcm-trash-2-outline:before {
	content: "\e9f7";
}

.vcm-trash-outline:before {
	content: "\e9f8";
}

.vcm-trending-down-outline:before {
	content: "\e9f9";
}

.vcm-trending-up-outline:before {
	content: "\e9fa";
}

.vcm-tv-outline:before {
	content: "\e9fb";
}

.vcm-twitter-outline:before {
	content: "\e9fc";
}

.vcm-umbrella-outline:before {
	content: "\e9fd";
}

.vcm-undo-outline:before {
	content: "\e9fe";
}

.vcm-unlock-outline:before {
	content: "\e9ff";
}

.vcm-upload-outline:before {
	content: "\ea00";
}

.vcm-video-off-outline:before {
	content: "\ea01";
}

.vcm-video-outline:before {
	content: "\ea02";
}

.vcm-volume-down-outline:before {
	content: "\ea03";
}

.vcm-volume-mute-outline:before {
	content: "\ea04";
}

.vcm-volume-off-outline:before {
	content: "\ea05";
}

.vcm-volume-up-outline:before {
	content: "\ea06";
}

.vcm-wifi-off-outline:before {
	content: "\ea07";
}

.vcm-wifi-outline:before {
	content: "\ea08";
}

.vcm-workflow-outline:before {
	content: "\ea09";
}