CODEWITHSUNDEEP
typescriptsassionic2
Ros
Ros

Reputation: 481

Change style with Ionic2

I need your support with ionic2. The problem is the sass style has not effect on the view in this code:

$verde : #89ce4b;
$amarillo : #ece04e;
$rojo : #f15959;
$gris : #aaa;

ion-icon[name="checkmark-circle"]{color:$verde;}
ion-icon[name="close-circle"]	{color:$rojo;}
ion-icon[name="alert"] {color:$amarillo;}
ion-icon[name="arrow-dropright-circle"] {color:$gris;}
<ion-list *ngFor="let insp of Lista">
			<button ion-item>
				<ion-label>{{insp.desc}}	  
				<ion-icon name="{{insp.icono}}"></ion-icon>
				</ion-label>
			</button>
</ion-list>

For example , if the "insp.icono" = "checkmark-circle", it must be "$verde" = #89ce4b. But the icon always shown with the default color (grey). What Can I do?

Upvotes: 1

Views: 239

Answers (1)

Philip Brack
Philip Brack

Reputation: 1328

Ionic attaches a different attribute when you bind the icon using data binding like you are.

You need to update your scss to use ng-reflect-name instead of name.

Example:

ion-icon[ng-reflect-name="heart"] {
  color: green;
}

Upvotes: 1

Related Questions