Angular Material - 图标

Angular Material 图标 - 从简单和简单的步骤学习角度材料从基本到高级概念，包括概述，环境设置，自动完成，底部工作表，按钮，卡片，复选框，芯片，联系芯片，内容，DatePicker，对话框，分频器， Fab Speed Dial，Fab工具栏，网格，图标，输入，布局，列表，菜单，菜单栏，进度条，单选按钮，选择，SideNav，滑块，Subheaders，刷卡，开关，标签，主题，Toast，工具栏，工具提示，排版，虚拟重复，WhiteFrame。

md-icon 是一个Angular指令，是一个在应用程序中显示基于矢量的图标的组件.除了使用Google Material Icons之外，它还支持图标字体和SVG图标.

属性

下表列出了参数和说明. md-icon 的不同属性.

Sr.No	参数&说明
1	* md-font-icon 这是与font-face相关联的CSS图标的字符串名称，用于呈现图标.需要预加载字体和命名的CSS样式.
2	* md-font-set 这是与字体库相关联的CSS样式名称，被指定为font-icon连字的类.该值也可以是用于查找类名的别名;在内部使用$ mdIconProvider.fontSet(< alias>)来确定样式名称.
3	* md-svg-src 这是String URL(或表达式)用于加载，缓存和显示外部SVG.
4	* md-svg-icon 这是用于查找图标的字符串名称内部缓存;也可以使用插值字符串或表达式.特定集名称可以与语法< set name>:< icon name>一起使用.要使用图标集，开发人员需要使用$ mdIconProvider服务预先注册集合.
5	aria-label 此标签用于辅助功能.如果提供了空字符串，则将使用aria-hidden ="true"从辅助功能层隐藏图标.如果图标上没有aria-label，父元素上没有标签，则会在控制台上记录警告.
6	alt 这是可访问性的标签图标.如果提供了空字符串，则将使用aria-hidden ="true"从辅助功能层隐藏图标.如果图标上没有alt，父元素上没有标签，则会在控制台上记录警告.

示例

以下示例显示了md-icons指令的使用以及图标的使用.

am_icons.htm

                                                                        angular            .module('firstApplication', ['ngMaterial'])            .controller('iconController', iconController);         function iconController ($scope) {            var iconData = [               {name: 'accessibility'  , color: "#777" },               {name: 'question_answer', color: "rgb(89, 226, 168)" },               {name: 'backup'         , color: "#A00" },               {name: 'email'          , color: "#00A" }            ];                        $scope.fonts = [].concat(iconData);                        $scope.sizes = [               {size:"md-18",padding:0},               {size:"md-24",padding:2},               {size:"md-36",padding:6},               {size:"md-48",padding:10}            ];         }

结果

验证结果.