Css 我们如何定制ion图标？当选择图标时

当我使用自定义ion图标时，我想对两种不同的外观使用相同的图标。我如何才能做到这一点

这是我想要定制的图标

我现在使用了下面的方法，但不能用它来填充

<ion-icon fill="black" src="../../assets/icon/Group 3.svg"></ion-icon>

这是svg文件

.cls-1{
填充：#da2128；
}
.cls-2{
填充：无；
冲程：#fff；
行程限制：10；
笔划宽度：0.25px；
}

在主题文件夹中

制作图标。css

ion-icon {
  &[class*="custom-"] {
    mask-repeat: no-repeat;
    background: currentColor;
    width: 5em;
    height: 1.5em;
    background: center;
  }
  &[class*="custom-gmail-icon"] {
    background-image: url(../assets/img/ic_google_logo.png);

  }
  &[class*="custom-search-icon"] {
    mask-image: url(../assets/img/google_logo.png);
  }
}

然后你的 app.css 进口

最后

<ion-icon  name="custom-gmail-icon"></ion-icon>

更改每个图标的名称，但当我单击图标更改时，它没有更改。您可以对Exmaple使用

*ngIf=”“

：如果选择

，如果不是

如果您从填充的图标开始-您可以使用过滤器将其更改为未填充的图标-但您不能从未填充的图标开始。

<ion-icon  name="custom-gmail-icon"></ion-icon>