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"></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); }"></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
- There was no closing ‘>’ for anchor tag
- 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;
}