Ionic : how to deeply customize ion-toggle?

Question

Within Ionic, I am trying to customize <ion-toggle> but I face an issue of toggle selection in css. I have 2 <ion-toggle> and when I design them in css they are both customized : that's correct. Issue coming if I want give both different custom ! I haven't found a way to put any class="xxx" on them allowing me to customize them separately.

Beyond they are <ion-toggle> classes I'd like to design on css

// .toggle : global sensitive toggle area
// .handle : circle above the toggle area 
// .toggle input : .handle moving area
// .toggle input+.track : .handle moving area when .handle at left
// .toggle input:checked+.track : .handle moving area when .handle at right

Even if I give a class to <ion-toggle> : <ion-toggle class"xxx">, there is no way to select it in css by : nor .toggle.xxx{border:......}, neither .xxx{.....}.

Please, does somebody knows how to dissociate these <ion-toggle> classes for many <ion-toggle>s ?

Answer 1

Solution found from the ionic documentation

By adding toggle-class="xxx" into :

<ion-toggle toggle-class="MyCustomClass" ng-repeat="item in settingsList" ng-model="item.checked" ng-checked="item.checked"> {{ item.text }} </ion-toggle>

CSS example :

.toggle-search .handle{
  height: 13px!important;
  width: 13px!important;

}

.toggle-search input+.track {
  height: 15px;
  width: 35px;
  margin-top: 2px;
}