ion-spinner style

[Hufschmidt]

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

[Hufschmidt]

Additional notes:

The problem with the desired solution seems similar to the following issues #6275 (main), #6279 (dupe) and #6277 (dupe), so the same fix might apply here (and maybe on other ion components as well?).

Edit: Looking at the source-code of ion-spinner it pretty much looks like the same problem/fix applies...

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

[Hufschmidt]

Added plunkr:
http://plnkr.co/edit/q7nsexm51CosPoxMt3qW?p=preview

Important code is in home.html (ion-spinner with class attribute) and the generated output (ion-spinner without custom class attribute, replaced by ionics spinner-*** class.

PS: You can remove platform:ios label (this effects all platforms), the ionitron auto-detection was a bit too eager here. :)

PPS: Also happens with ionic2 beta 10

[Hufschmidt]

I've gone through the source-code and ion-spinner seems like the only component left with this issue (after ion-slide was fixed), which seems to be caused by having a [class]='some-value' binding in the components decorator host setting. (I have to admit, I have no clue what the host setting does though... Ok it can set attributes (and attribute bindings) of the components own DOM element, aka host ^.^)

132d8e9 fixed this for ion-slides by using Renderer.setElementClass(...) from @angular/core instead. :)

[manucorporat]

@brandyscarney I agree with @Hufschmidt , last time I tried to give a spinner my own style, it was complicated. Not sure about a solution though :)