Angular 2/8 + Mafterial Добавить иконку в Slide toggle

19 марта 2021, 01:20

Всем привет.

Необходимо внутрь включенного Slide toggle добавить иконку, что бы выглядело вот так:

В идеале, что бы картинку можно было брать из assets. Стандартное API не дает такой возможности. Нашел вопрос, где кастомизировали внешний вид переключателя через CSS, но увы - ничего не вышло. Моя попытка выглядела вот так:

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
     background-image: url('http://cdn.onlinewebfonts.com/svg/img_201862.png') !important;
   }

так же пробовал помещать картинку в content: url(...)

P/s: на цвета или привязку к функционалу не обращайте внимания. Суть вопроса именно в размещении картинки внутри переключателя потому как у меня в приниципе не выходит это сделать... Однажды я видел подобную реализацию, но вот когда нужно - найти не получается :(

Ссылка на официальную документацию: https://material.angular.io/components/slide-toggle/api Вдруг поможет...

Заранее спасибо.

Answer 1

Как мне подсказал overthesanity - я по началу взялся за пакет simple-icon-toggle, но как оказалось - пакет работает не корректно (я создал баг-реквест автору). Баг заключается в том, что пакет ищет компоненты node_modules внутри себя и пытаются обратится за ними по пути, к примеру: "C:\Project\node_modules\simple-icon-toggle\node_modules@angular\core\esm5".

Так как данный пакет покрывал практически весь необходимый мне функцоинал - я использовал исходный код данного пакета для создания собственного компонента. К слову - компонент прекрасно работает с данным исходным кодом и без правок.

Еще раз спасибо overthesanity за подсказку.

P/s: если вы знаете другие варианты решения - не стесняемся, оставляем комментарии. Буду премного благодарен.