Angular Material 攻略 04 Icon

Icon

网页系统中的Icon虽说很简单，可是其中的学问仍是有不少的，咱们经常使用的Icon库有FontAwesome、Iconfont等，咱们选择了Angular Material这个组件库，就介绍Material Icons吧。

对Icon感兴趣的同窗能够看一下这里

Material Design 的 Icon

Material Design 的 Icon大体分红两种，一种是系统Icon，另外一种是产品Icon。

系统Icon

系统的Icon通常以不用文字描述就能够告诉用户操做等意义为准则，好比保存

咱们看一眼就知道这个是存储。这个图像的起源勾起了小学的回忆。辣时候仍是软盘💾。。有兴趣的能够搜一下。。

产品Icon

产品Icon顾名思义就是某些产品对应的Icon，好比腾讯的企鹅图标，新浪的大眼睛，这部分通常由专业的设计师团队来作。就很少讲了（怕露馅）

一套好的Icon对于前端来讲相当重要，好的Icon甚至可让用户在没有文字描述的状况下正确的去操做，而很差的Icon每每会给用户错误的引导。 好在Google爸爸也给出了一套对应的图标系统Material Icons,大概由1000个Icon，足够咱们平常使用了。

Material Icons

做为Google爸爸推出的官方Icon库，用起来也是很便捷的。就拿刚刚的save图标来讲吧。 咱们先去 Material Icons，而后在搜索框中 输入 sava

而后咱们点击这个图标会出现下载SVG，PNG或者ICON FONT三种方式

咱们在以前已经引入过图标库了，因此咱们直接看第三种 ICON FONT 若是不须要兼容IE9如下那就(IE毒瘤)

<i class="material-icons">save</i>
复制代码

直接在HTML中插入这句话就能够了

<div>点
<i class="material-icons">save</i>
保存    
</div>
复制代码

Angular Material的MatIcon

虽说<i class="material-icons">save</i>的方法已经很容易的，可是追求组件开发的Angular Material怎么会容许这个Tag方式的呢，因此又造出了一个MatIcon

MatIcon

首先 老样子 咱们须要在使用的地方引入它

import { MatIconModule } from '@angular/material';
@NgModule({
  ...
  imports: [
    ...,
    MatIconModule],
  ...
})
export class AppModule {}
复制代码

而后HTML了

<div>点
<!--<i class="material-icons">save</i>-->
  <mat-icon>save</mat-icon>
保存
</div>
复制代码

看下效果

和以前仍是同样，可是语意化了多了吧。

关于Angular Material的颜色

先放官方连接 建议配色的选择为两种主要颜色(primary color)跟次要颜色(secondary color)，用来区分主要的功能颜色及强调能够选择的画面，另外在表单相关的组件上还加上了错误讯息(error message)的颜色，而在Angular Material的样式中将这三种颜色名称分别叫作primary、accent和warn。 在HTML中加上

<div>
  默认颜色
  <mat-icon>message</mat-icon>
</div>

<div>
primary色
  <mat-icon color="primary">message</mat-icon>
</div>

<div>
accent色
  <mat-icon color="accent">message</mat-icon>
</div>

<div>
  warn色
  <mat-icon color="warn">message</mat-icon>
</div>

复制代码

看下效果

固然 这种颜色是能够经过CSS进行覆盖的，可是若是没有对设计和Material Design有较高对理解，不建议这么作，颜色之间对相互搭配，不是那么好作对。

使用其余对图标

Material Icons中对图标虽然不少，可是架不住需求啊，怎么办呢，俩办法 第一 本身公司有一套，本身画的，直接用SVG。 拿angular本身的图标举个栗子 先去下载https://angular.cn/presskit，下载单色的logo，(彩色怎么改色，真是) 而后放到src/asset/imges里

默认静态资源和网站是在一个服务器上，emm跨域本身搞定。这里不细说 先去app.component.ts 中注入须要的服务

import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
复制代码

MatIconRegisterys是用来扩充SVG icon的，DomSanitizer是用来标记信任路径的，由于angular默认开启XSS过滤，不去标记信任会GG。 而后再去对应的module中注入HttpClientModule，由于咱们要下载这个SVG。

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  ...
  imports: [
    ...,
    HttpClientModule
    ],
  ...
})
export class AppModule {}
复制代码

而后咱们加入这个SVG图标

this.matIconRegistry.addSvgIconInNamespace('custom-svg','angular',this.domSanitizer.bypassSecurityTrustResourceUrl('assets/imges/angular.svg'));
复制代码

• namespace：icon的namespace，方便用来分类不一样的icons，也可以避免名称冲突
• iconName：给这个icon起名
• url（奏是那个value）：一个安全的图片来源 而后咱们去试一下咱们自定义的Icon,用法是

<mat-icon svgIcon="namespace:iconName"></mat-icon>
复制代码

来个实例

<div>
  <mat-icon svgIcon="custom-svg:angular"></mat-icon>
  <mat-icon svgIcon="custom-svg:angular" color="primary"></mat-icon>
  <mat-icon svgIcon="custom-svg:angular" color="accent"></mat-icon>
  <mat-icon svgIcon="custom-svg:angular" color="warn"></mat-icon>
</div>

复制代码

在MatIcon中使用其余Icon Font

除了用本身的图标库，还有辣么多好用的图标库，咋用呢？ 拿FontAwesome举个栗子，毕竟用的人多 第五版还没摸透，拿第四版，用的人最多的版本

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
复制代码

而后像刚才那样引入

this.matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
复制代码

• alias：原来icon font class的别名，例如FontAwesome都会在class里面加上fa以后才加上fa-*，这里要设定的就是fa的别名。
• className：原来icon font的主要class，以FontAwesome来讲也就是fa

用法

<mat-icon fontSet="alias" fontIcon="className"></mat-icon>
复制代码

示例

<mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up"></mat-icon>
  <mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up" color="primary"></mat-icon>
  <mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up" color="accent"></mat-icon>
  <mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up" color="warn"></mat-icon>
复制代码

一些经常使用特效也是能够直接用的,好比 旋转

<mat-icon fontSet="fontawesome" fontIcon="fa-spin">
    <mat-icon fontSet="fontawesome" fontIcon="fa-thumbs-up"></mat-icon>
  </mat-icon>
复制代码