If you write
<ion-icon name="link" danger></ion-icon>
the result will be a red link icon. But if you write
<ion-icon name="link" color="danger"></ion-icon>
the icon stays in its default color. But the second approach is needed to change the color from JS.
Currently, ion-icon does not have a input for color
, so color="danger"
will not work.
And what would be the workaround? How to change the color of an icon from angular code?
Write a CSS property for ion-icon
in .scss
file.
I have checked this on ionic serve
…this works fine for me.
but I have not checked on a real device.
and kindly cross-verify is this safe to write color property in CSS
for ion-icon
… may be the ionic member will give views on this.
2 Likes
According to this post
we get the class name, so we can add the color in our scss file.
.ion-md-time{
color: red !important;
}
.ion-ios-time{
color: red !important;
}
I tried this, it worked for me.
Just to update this thread, ion-icon
is working with the color
property now. There is example code of this here: https://github.com/ionic-team/ionic/blob/master/demos/src/icon/pages/page-one/page-one.html
<ion-icon name="ionic" color="primary"></ion-icon>
<ion-icon name="logo-angular"></ion-icon>
<ion-icon name="heart" color="danger"></ion-icon>
<ion-icon name="ionitron" color="primary"></ion-icon>
<ion-icon name="happy" color="vibrant"></ion-icon>
<ion-icon name="people"></ion-icon>
<ion-icon name="person"></ion-icon>
<ion-icon name="contact"></ion-icon>
<ion-icon name="apps"></ion-icon>
<ion-icon name="lock"></ion-icon>
<ion-icon name="key" color="bright"></ion-icon>
<ion-icon name="unlock"></ion-icon>
<ion-icon name="map" color="secondary"></ion-icon>
<ion-icon name="navigate"></ion-icon>
<ion-icon name="pin"></ion-icon>
<ion-icon name="locate"></ion-icon>
<ion-icon name="mic"></ion-icon>
<ion-icon name="musical-notes" color="vibrant"></ion-icon>
<ion-icon name="volume-up"></ion-icon>
<ion-icon name="microphone"></ion-icon>
<ion-icon name="cafe" color="bright"></ion-icon>
<ion-icon name="calculator"></ion-icon>
<ion-icon name="bus"></ion-icon>
<ion-icon name="wine" color="danger"></ion-icon>
<ion-icon name="camera"></ion-icon>
<ion-icon name="image" color="secondary"></ion-icon>
<ion-icon name="star" color="bright"></ion-icon>
<ion-icon name="pin"></ion-icon>
<ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon>
<ion-icon name="arrow-back"></ion-icon>
<ion-icon name="arrow-dropdown"></ion-icon>
<ion-icon name="arrow-forward"></ion-icon>
<ion-icon name="cloud"></ion-icon>
<ion-icon name="sunny" color="bright"></ion-icon>
<ion-icon name="umbrella"></ion-icon>
<ion-icon name="rainy" color="primary"></ion-icon>
And a live demo here: http://ionicframework.com/docs/api/components/icon/Icon/
It is using the following colors defined in a variables.scss
file:
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
vibrant: rebeccapurple,
bright: #ffc125
);
12 Likes
you can used
app.scss
ion-icon{
color:color($colors, primary, secondary);
}
2 Likes
This worked for me!
<button ion-button icon-start clear small class="trashIconBtn">
<ion-icon ios="ios-trash" md="md-trash" class="trashIcon"></ion-icon>
</button>
.trashIcon
{
color: rgb(71, 67, 67);
}
1 Like