Reputation: 2834
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
Reputation: 7391
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