ion-spinner style

Issue

According to the ion-spinner api-doc you should be able to change the spinner color by changing stroke style via

ion-spinner svg {
  stroke: #444;
  fill: #222;
}

But this does not work, since stroke (and fill) is defined on classes of the form spinner-* (eg .spinner-ios, .spinner-dots, etc.) which take precedence over the above type selector.

Sidenote: The main use-case touched by this issue is changing the style/color of a single ion-spinner, not globally. Although spinners currently seem to use fixed color values in scss instead of variables, which would be another nice addition…

Tested with ionic2 beta9

Working solutions:

Using !important, which should be avoided as much as possible

ion-spinner svg * {
  stroke: #00f !important;
}

Overwriting all spinner- classes, which requires to have internal knowledge about ionic-angular

.spinner-ios line,
[...]
.spinner-crescent circle {
  stroke: #00f;
}

Desired solution:

Overwrite by attaching custom class to ion-spinner.

This does currently not seem to work, because <ion-spinner class="my-custom-blue"></ion-spinner> for example gets transformed into <ion-spinner _ngcontent-ykj-1="" class="spinner-crescent"></ion-spinner>, so any custom class gets dropped…

This seems like a severe bug to me. O_O

[brandyscarney]

Thanks for the issue! This will be fixed in the beta 12 release. The class will no longer be clobbered, and you will be able to pass a color via the color input. See this file for some examples: https://github.com/driftyco/ionic/blob/master/src/components/spinner/test/colors/main.html

[sertal70]

I would suggest you to update the online documentation at https://ionicframework.com/docs/api/components/spinner/Spinner/, because as per today it still reports that to change the spin color the fill and stroke properties must be used, no mention to the color property is made.