CODEWITHSUNDEEP
angularsvgangular-material2
k102
k102

Reputation: 8079

Can not apply css to svg icon inside mat-icon

Having a trouble in styling svg icon inside angular material.

controller:

mdIconRegistry.addSvgIcon('testAnimation', sanitizer.bypassSecurityTrustResourceUrl(`${svgPath}/icons/testAnimation.svg`));

template:

<a class="icon"><md-icon svgIcon="testAnimation"></md-icon></a>

style:

.icon .st9 {fill: black}

The problem is that this css rule is not applied to the icon - and I can't figure out why.

There is a path with such class in my svg image and it can be found via document.querySelectorAll('.icon .st9'). I even can change it's fill color using document.querySelectorAll('.icon .st9')[0].style.fill = 'black'.

When I insert svg in html directly without material - it works fine too.

Upvotes: 1

Views: 3440

Answers (1)

David
David

Reputation: 34435

Try that in your component.css file

:host ::ng-deep .icon .st9 {fill: black}

Or put your css rule in style.css, but make sure to encapsulate with the component's name to make sure it does not leak

app-your-component .icon .st9 {fill: black}

Upvotes: 2

Related Questions