ng-ytl-zorro-antd/src/showcase/nz-demo-icon/nz-demo-icon.html

An enterprise-class UI components based on Ant Design and Angular

<article class="markdown">
  <h1>Icon<span class="subtitle">图标</span></h1>
  <section class="markdown">
    <nz-markdown [nzContent]="_markdownCode"></nz-markdown>
    <h3 id="方向性图标"><span>方向性图标</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <ul class="anticons-list clearfix icons">
      <li *ngFor="let direction of _icons.direction" nz-icon-copy>
        <i class="anticon" [ngClass]="'anticon-'+direction"></i>
        <span class="anticon-class">{{direction}}</span>
      </li>
    </ul>
    <h3 id="提示建议性图标"><span>提示建议性图标</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <ul class="anticons-list clearfix icons">
      <li *ngFor="let suggestion of _icons.suggestion" nz-icon-copy>
        <i class="anticon" [ngClass]="'anticon-'+suggestion"></i>
        <span class="anticon-class">{{suggestion}}</span>
      </li>
    </ul>
    <h3 id="网站通用图标"><span>网站通用图标</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <ul class="anticons-list clearfix icons">
      <li *ngFor="let other of _icons.other" nz-icon-copy>
        <i class="anticon" [ngClass]="'anticon-'+other" [class.anticon-spin]="other==='loading'"></i>
        <span class="anticon-class">{{other}}</span>
      </li>
    </ul>
    <h3 id="品牌和标识"><span>品牌和标识</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <ul class="anticons-list clearfix icons">
      <li *ngFor="let logo of _icons.logo" nz-icon-copy>
        <i class="anticon" [ngClass]="'anticon-'+logo"></i>
        <span class="anticon-class">{{logo}}</span>
      </li>
    </ul>
  </section>
</article>