Question

我正在使用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');

Answer 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中，名称为theme）。我使用此变量来接受用户从下拉菜单中选择的主题，并自动将应用程序更改为新主题。

这里的关键元素是

$mdThemingProvider.alwaysWatchTheme(true)

位于您的配置中

md-theme-watch="true"

在你的HTML中

如何根据配置的调色板主题更改角度材质中的md图标的颜色？

1 个答案: