Material icon change color in ionic fail to work

I have the code below that use an icon from material.io

`<a ng-if="!checkWatchState(stock.Stock, stock.Market)" ng-click="toggleWatchState(stock.Stock, stock.Market)" <i class="material-icons">&#xE87E;</i></a>`

However, I would like to change the color but it does not take effect.

I refer to the tutorial here
http://google.github.io/material-design-icons/#icon-font-for-the-web

When I changed to
<a ng-if="!checkWatchState(stock.Stock, stock.Market)" ng-click="toggleWatchState(stock.Stock, stock.Market)" <i class="material-icons.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }">&#xE87E;</i></a>

The color remain the same, May I know how to style it correctly?

Try this

<a ng-if="!checkWatchState(stock.Stock, stock.Market)" ng-click=“toggleWatchState(stock.Stock, stock.Market)”> <i class=“material-icons.material-icons.md-light.md-inactive” style=“color: rgba(255, 255, 255, 0.3);”>  </i> </a>

not working.
also, what icon you use? Do not see any changes

I made couple changes in your code

  1. There was no closing ‘>’ for anchor tag
  2. The color was include in style attribute.

Now need to check for classes you have used and the value of function in ng-if

For me it works
https://codepen.io/thesourav/pen/OjPJRJ

You can try

.material-icons{
   color: rgba(255, 255, 255, 0.3) !important;

}