Олег Морев

Как-то так
https://codesandbox.io/s/lively-water-vfi0s

например

@Component({
  //...
  encapsulation: ViewEncapsulation.None
})

Доки.

Вариант без делегирования.

Это потому что вы ее красите в растре.

Варианта два:
1. Скачать по ссылке иконку в векторе (EPS-файл) и спокойно поменять цвета в Иллюстраторе (или другом векторном редакторе). Кликаете белой стрелкой (гор. клав.: A) на объекте и задаете цвет.
2. В Фотошопе (или ином растровом редакторе):
а) руками подчистить рваные края;
б) поверх иконки нарисовать объекты заново и окрасить в нужные цвета (инструментами Lasso, Pen Tool, либо просто создавая прямоугольники и трансформируя их);
в) обвести каждую деталь и залить нужным цветом (например Magic Wand или Lasso Tool).

Конечно же, первый вариант самый удобный, но можно и вторым способом. Чтобы уменьшить возможные огрехи все равно скачайте векторный файл и откройте в Фотошопе покрупнее, перекрасьте и уже через Save for Web сохраните в нужном размере PNG — рваных краев быть не должно.

Ну как-то так.

Что надо сделать

Прочитать про ключевое слово this и научиться с ним работать.

В вашем коде при каком-либо действии затрагиваются все элементы сразу, к примеру, вы пишите:

option.each(function(i, item){
   list.append('<li>' + $(item).text() + '</li>');
});

И этот код добавит всем элементам .list все элементы option, какие только есть на странице. А на самом деле, у каждого .select свой лист и опции и работать с ними нужно отдельно.

Еще интересные строки:

//Установит всем .selected на странице значение первого select'a
selected.text(select.val());

//Если первый .selected на странице имеет класс focus, скрыть все существующие списки 
container.click(function(){
		if(selected.hasClass('focus')){
			list.slideUp(300, function(){
				selected.removeClass('focus');
			});
			return;
		};

		list.slideDown(300);
		selected.addClass('focus');
	});

UPD: А скрывать списки по нажатию куда-то вне них можно так

$(document).click(function(e) {
        $(e.target).closest(".select").length||
              $(".focus").removeClass("focus")
                    .next(".list").slideUp(300);
});

Короче тут вот эта тема: css.yoksel.ru/css-and-svg-masks

Вариант через прозрачный border, но придется установить background-clip: padding-box:

jsfiddle.net/gjcbzwz5

Написал для вас небольшой пример, как реализовать это в несколько строк - jsfiddle.net/nh92xgxr

1) Счётчик или булев переключатель, по типу click -> flag = !flag, т.е. присваиваем противоположное значение.
2) jsfiddle.net/IonDen/Lj17g71m/2