angular9使用iconfont （symbol方式）

angular9使用iconfont （symbol方式）

如果想借助ng-zorro使用可以看我另一篇博客：angular 使用ng-zorro添加iconfont图标
本篇文章主要讲symbol方式，其他两种方式当然也可以，但是symbol有自身的许多优点（与另外两种相
支持多色图标等），当然也有缺点（兼容性较差；浏览器渲染svg的性能一般等）可以视情况采用。

亲测成功，步骤如下：
1.首先登录iconfont.cn
2. 选中某个图标点击加入购物车，选好后，点击右上角小购物车按钮，在购物车中将所有图标加入项目

3.下载项目到本地

4.将解压后的包中的iconfont.js文件放入assets文件夹中，我这里路径为src/assets/font/iconfont.js
解压后的文件列表：

5.在angular.json中添加你的iconfont.js文件路径，如下

6.在全局样式文件（我这是styles.scss）中增加以下css代码

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

7.在组件中使用
html:

          <svg class="icon" aria-hidden="true">
            <use [attr.xlink:href]="icon_name"></use>
          </svg>

ts：

  icon_name= '#icon-zhuye';

注意，这里的icon_name的值对应你项目中需要引用的icon的码，复制过来后要加个井号

8.成功