Невозможно применить стили к svg в компоненте css с Angular, только в глобальном файле css

Question

У меня есть компонент «Sidenav», в котором я использую svg в качестве значков меню, но я не могу применить стили к этим значкам из файла scss компонента. Он работает только из глобального файла scss.

Так как я имею дело с тегами "svg", "polygon", "path" ...., он не работает в файле scss компонента.

Есть ли способ заставить его работать, так как я использую только те svg в моем компоненте?

Пример кода:

<div id="sidenav-icon-section">
      <li class="bleu-icon">
          <a href="/">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" data-inject-url="http://localhost:4200/assets/images/menu_items/accueil.svg" _ngcontent-c1="">
                <polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="32,3 2,33 11,33 11,63 23,63 23,47 39,47   39,63 51,63 51,33 62,33 "></polygon>
                </svg>
            </a> 
        </li>
    </div>

Этот код CSS будет работать в моем глобальном файле scss, но не в моем файле css компонента:

#sidenav-icon-section {

  .bleu-icon polygon {
    transition: .2s !important;
  }

  &:hover .bleu-icon polygon {
    stroke: #009999 !important;
  }
}

или даже любое свойство css, подобное этому:

svg {
dislay: none;
}

Answer 1

Используйте encapsulation: ViewEncapsulation.None в компонентном декораторе:

@Component({
  selector: '...',
  template: `...`,
  encapsulation: ViewEncapsulation.None
  ...
})

Это поместит стиль вашего компонента в тег head вашей страницы.