Angular 12 doesn't render svg component

Problem is that, when I create components with selector tags , angular adds its own element tags to svg schema and this breasks the svg's schema and browser doesn't render it. So, I used attribute selector for achieving this problem. This SO answer help me to solve this problem.\nExample project is here. You can check components under projects folder\nI used attribute tag which is wrapped with [and ] instead of selector tags.\n@Component({\n selector: '[ngx-beard]',\n template: `\n <svg:g>\n <ng-container *ngIf="beard == 'Hipster'">\n <path\n d="M270.126 194.455C279.615 234.059 255.201 273.857 215.597 283.345C192.29 288.93 168.916 282.772 151.692 268.687C134.5 252.801 130.5 201.301 126.692 176.95C140.692 208.451 176.316 210.895 210.192 204.951C238.692 199.951 261.491 198.951 261.491 159.951C263.376 162.567 268.469 187.538 270.126 194.455Z"\n [attr.fill]="beardColor"\n />\n </ng-container>\n </g>\n `\n })\n",

maybe it is due to the changedetection of angular.\nHave you perhaps tried https://angular.io/api/core/ChangeDetectorRef\ndetectChanges after you change some other component?\n ngOnInit(): void {\n this.random();\n this.cd.detectChanges()\n }\n",