Цвет значка пера не меняется в Angular

Question

В моем проекте Angular есть значок пера, и я пытаюсь использовать свой основной цвет на странице цветовой темы, но по какой-то причине я не могу изменить цвет.

HTML

           <i-feather name="search"color="primary" class="icon"></i-feather>

CSS

.icon{
  height: 40px;
  width: 40px;
}

Примечание: я смог нормально изменить цвет: синий; в моем css файле, но это не так, как я хочу. Я хочу повторно использовать свой основной цвет, чтобы потом просто сменить глобальный css.

styles-theme.s css

@mixin app-base-theme($theme) {
    $primary: map-get($theme, primary);

    .i-feather {
        color: mat-color($primary);
    }

Предполагается, что он будет таким же цвет как полоска внизу

Любая помощь или предложение о том, как мне поступить. ТХ