如何在Ionic 3中的标签栏上更改自定义图标？

Question

I am using custom svg

$visa: url(../assets/svg/visa.svg); 

 &[class*="aw-"] {
      mask-size: contain;
      mask-position: 50% 50%;
      mask-repeat: no-repeat;
      background: currentColor;
      width: 1em;
      height: 1em;
    }

 &[class*="aw-visa"] {
        mask-image: $visa;
        .tab-button[aria-selected=true] & {
          mask-image: $visa;
        }
      }

当某人点击不活动的添加按钮时，我希望将其更改为第二个活动按钮。

ng

Answer 1

我找到了解决自己问题的方法。

活动图标已填充，非活动图标是未填充的图标。

$upload-foto-active: url(../assets/svg/uploadfotoactive.svg);
$upload-foto-inactive: url(../assets/svg/uploadfotoinactive.svg);


ion-icon {

    &[class*="aw-"] {
      mask-size: contain;
      mask-position: 50% 50%;
      mask-repeat: no-repeat;
      background: currentColor;
      width: 1em;
      height: 1em;
    }


&[class*="aw-upload"] {
        mask-image: $upload-foto-inactive;
        .tab-button[aria-selected=true] & {
          mask-image: $upload-foto-active;
        }
      }
     
     
}