实现自定义图标

步骤一：下载svg，放入src/assets/svg目录下。（目录可以随意。）

步骤二：angular.json添加代码，让ionic读取到svg文件。

 {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              },
              {
                "glob": "**/*.svg",
                "input": "src/assets/svg", // svg文件所在目录
                 "output": "./svg"
              }

以上步骤完成即完成自定义图标，引用方式：

<ion-icon name="wome"></ion-icon>

注意：svg命名可以带-符号，但不能有大写字母，也不要与ionic自带图标库重名。

实现tabs图标颜色自定义切换

<ion-tabs>
  <ion-tab-bar slot="bottom" class="ml-tab">
    <ion-tab-button tab="home">
      <ion-icon name="wome"></ion-icon>
      <ion-label class="ml-home-word">首页</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

以上代码即可实现tabs自定义图标切换，默认未选择图标是灰色，选中是蓝色。如果要改变选中时与##未选中时的图标颜色，可以用以下代码实现：

 <ion-tab-button tab="home" class="ml-color">

.ml-color {
    --color: #BBBBBB; // 未选中时颜色
    --color-selected: #1890FF; // 选中时颜色
}

注意：要实现以上效果，svg不能自带颜色，如果自带颜色，可以用笔记本打开，删除掉fill属性，即可恢复到默认无色状态。