如何根据配置的调色板主题更改 Angular Material 中 md 图标的颜色？答案

【问题标题】：How can I change the color of an md-icon in Angular Material as per configured palette theme?如何根据配置的调色板主题更改 Angular Material 中 md 图标的颜色？
【发布时间】：2016-02-25 02:29:08
【问题描述】：

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

<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');

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

您需要设置要在元素中使用的主题，例如。 md-theme="theme name" 然后设置要在类中使用的调色板，如 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，以下是我的主题配置之一。我使用其中的几个。我根据用户选择的主题动态更改整个应用的主题

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

和我的主/默认主题配置我在下面有以下内容

  $mdThemingProvider.alwaysWatchTheme(true);

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

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

我有一个对我的应用程序来说是全局的变量（在名为主题的 MainController 中）。我使用这个变量来接受用户从下拉列表中选择的主题，它会自动将应用程序更改为新主题。

这里的关键元素是

$mdThemingProvider.alwaysWatchTheme(true)

在您的配置中，并且

md-theme-watch="true"

在你的 html 中

【讨论】：

以上示例代码不起作用。你能提供更多的描述吗？
你能展示你的主题配置吗？你还想动态更改图标的主题吗？
问题已更新。如果我将primaryPalette 更改为pink，那么图标颜色也应该是粉红色。这是我的要求。