CODEWITHSUNDEEP
angularjsangular-material
Jahanzaib Aslam
Jahanzaib Aslam

Reputation: 2834

How can I change the color of an md-icon in Angular Material as per configured palette theme?

I am using Angular Material V1.0.5. I used material icons using below code 

<md-input-container class="md-block">
       <md-icon md-svg-src = '/images/ic_email_black_24px.svg'></md-icon
       <input ng-model="auth.user.email" type="email" placeholder="Email">
</md-input-container>

I know, How to change md-icon color using custom style. But I want to change md-icon color as per configured theme palette. How can I achieve this?

Update: here is configuration for theme in angular.config()....

$mdThemingProvider.theme('default')
 .primaryPalette('indigo')
 .accentPalette('orange')
 .warnPalette('red');

Upvotes: 1

Views: 3397

Answers (1)

oseintow
oseintow

Reputation: 7411

you need to set the theme you want to use in your element eg. md-theme="theme name" then set the pallete you want to use in a class like class="platte name". example is below

 <md-input-container class="md-block">
   <!-- md-theme = "variable or new theme name" -->
   <md-icon md-theme="default" class="md-primary md-hue-3" md-svg-src = '/images/ic_email_black_24px.svg'></md-icon
   <input ng-model="auth.user.email" type="email" placeholder="Email">
 </md-input-container>

I use coffeescript and the following is one config of my themes. i use several of them. I dynamically change the theme of my entire app base on the theme that a user select

  angular.module 'acme'
     .config [
        '$mdThemingProvider'
        ($mdThemingProvider) ->
         $mdThemingProvider.theme 'pink'
           .primaryPalette 'pink',
             'default': '50',
             'hue-1': '100',
             'hue-2': '300',
             'hue-3': '500',
          .accentPalette 'pink',
            'default': '700'
          .warnPalette 'pink'
          .backgroundPalette 'pink',
            'default': '50',
            'hue-1': '100',
            'hue-2': '300',
            'hue-3': '500',

and my main/default theme config i have the following under

  $mdThemingProvider.alwaysWatchTheme(true);

which makes it possible to dynamically change the theme. and in my html i have 

 <html lang="en" ng-app="acme" ng-controller="MainController as main" md-theme="{{main.theme}}" md-theme-watch="true">

i have a variable which is global to my application (in MainController with the name theme). I use this variable to accept a theme that the user select from a let me say a dropdown and automatically it will change the app to the new theme.

the key element here is 

$mdThemingProvider.alwaysWatchTheme(true)

which is in your config and

md-theme-watch="true"

which is in your html

Upvotes: 4

Related Questions