title: Ionic image fill color not change
body: <p>I'm using Ionic 3 and I added some css code for this </p>
  
  <p><strong>example</strong> -  </p>
  
  <p><strong>someone click  on the image after    need to change fill color</strong> . but its not working for me . Can anyone help me how to do it correctly ? </p>
  
  <p>Thanks</p>
  
  <p><strong>css</strong></p>
  
  <pre><code>clap {
    /*========================
     styles
      =======================*/
    .clap {
      position: relative;
      outline: 1px solid transparent;
      border-radius: 0;
      border: 0px solid #a750a9;
      top:-0.2rem;
      height: 0px; margin: 0px auto; margin-left: 2.3rem;
      background: none;   cursor: pointer;animation: pulse 2s infinite;
  
    }
    .clap:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      border-radius: 50%;
      width: 44px;
      height: 44px;
    }
    .clap:hover {
      cursor: pointer;
      border: 0px solid #a750a9;
      transition: border-color 0.3s ease-in;
    }
    .clap:hover:after {
      animation: shockwave 1s ease-in infinite;
    }
    .clap img {
      width: 20px;
      fill: none;
      stroke: #a750a9;
      stroke-width: 2px; margin-top: -1.5rem;
    }
    .clap img.checked {
      fill: #a750a9;
      stroke: #a750a9;
      stroke-width: 1px;
    }
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;img   [class.checked]="clapIconChecked"  src="assets/imgs/clap.png"&gt;
  </code></pre>
  
  <p><strong>.ts</strong></p>
  
  <pre><code>     export class ClapComponent  {
       clapIconChecked = false;
  
     this.clapIconChecked = true;
        }
      }
  </code></pre>