如何根据配置的调色板主题更改 Angular Material 中 md-icon 的颜色？

Question

我正在使用 Angular Material V1.0.5。我使用 material 图标使用下面的代码

<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>

我知道，如何使用自定义样式更改 md-icon 颜色。但我想根据配置的主题调色板更改 md-icon 颜色。我怎样才能做到这一点？

更新： 这里是 angular.config()....

中的主题配置

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

Answer 1

您需要设置要在元素中使用的主题，例如。 md-theme="theme name" 然后在 class 中设置你想要使用的调色板，比如 class="platte name"。示例如下

 <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>

我使用 coffeescript，以下是我的主题配置之一。我用了其中的几个。我根据用户 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',

和我的 main/default 主题配置

下面是我的主题配置

  $mdThemingProvider.alwaysWatchTheme(true);

这使得动态更改主题成为可能。在我的 html 中有

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

我有一个对我的应用程序来说是全局的变量（在 MainController 中，名称为 theme）。我使用此变量接受用户 select 来自让我说一个下拉菜单的主题，它会自动将应用程序更改为新主题。

这里的关键要素是

$mdThemingProvider.alwaysWatchTheme(true)

在您的配置中并且

md-theme-watch="true"

在你的 html

如何根据配置的调色板主题更改 Angular Material 中 md-icon 的颜色？

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

angularjs

angular-material