无法将样式应用于SVG的带角度的组件内CSS,仅在全局CSS文件中

我有一个“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;
}