title: feather icon color is not changing in Angular
body: <p>I have a feather icon in my Angular project and I'm trying to use my primary color from color theme page but some reason I can't change the color.</p>
  
  <p>HTML</p>
  
  <pre><code>           &lt;i-feather name="search"color="primary" class="icon"&gt;&lt;/i-feather&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.icon{
    height: 40px;
    width: 40px;
  }
  </code></pre>
  
  <p>Note: I was able to change normally like color: blue; in my css file but it's not how I want to do. I want to reuse my primary color so that I can just change from global css later on.</p>
  
  <p>styles-theme.scss</p>
  
  <pre><code>@mixin app-base-theme($theme) {
      $primary: map-get($theme, primary);
  
      .i-feather {
          color: mat-color($primary);
      }
  </code></pre>
  
  <p>It supposed to be the same color like the bar underneath
  <a href="https://i.stack.imgur.com/3tKeG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3tKeG.jpg" alt="enter image description here"></a></p>
  
  <p>Any help or suggestion on how should I do. tx</p>