angular - add class name to the generated svg

Question

I'm using below code to add one svg icon to the template

<mat-icon #matMenuAnchor [matMenuTriggerFor]="areaMenu" class="icon-menu" svgIcon="icons-action-more"></mat-icon>

it will generate below svg in the html.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
    <g fill="none" fill-rule="evenodd">
        <g fill="#FFF">
            <g>
                <g>
                    <path d="M8 5.333c.733 0 1.333-.6 1.333-1.333S8.733 2.667 8 2.667 6.667 3.267 6.667 4 7.267 5.333 8 5.333zm0 1.334c-.733 0-1.333.6-1.333 1.333S7.267 9.333 8 9.333 9.333 8.733 9.333 8 8.733 6.667 8 6.667zm0 4c-.733 0-1.333.6-1.333 1.333s.6 1.333 1.333 1.333 1.333-.6 1.333-1.333-.6-1.333-1.333-1.333z" transform="translate(-219 -202) translate(14 198) translate(205 4)"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

Is there anyway we can add class="ui-clickable" to the generated svg? expected as below:

<svg xmlns="http://www.w3.org/2000/svg" class="ui-clickable" width="100%" height="100%" viewBox="0 0 16 16" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
        <g fill="none" fill-rule="evenodd">
            <g fill="#FFF">
                <g>
                    <g>
                        <path d="M8 5.333c.733 0 1.333-.6 1.333-1.333S8.733 2.667 8 2.667 6.667 3.267 6.667 4 7.267 5.333 8 5.333zm0 1.334c-.733 0-1.333.6-1.333 1.333S7.267 9.333 8 9.333 9.333 8.733 9.333 8 8.733 6.667 8 6.667zm0 4c-.733 0-1.333.6-1.333 1.333s.6 1.333 1.333 1.333 1.333-.6 1.333-1.333-.6-1.333-1.333-1.333z" transform="translate(-219 -202) translate(14 198) translate(205 4)"></path>
                    </g>
                </g>
            </g>
        </g>
    </svg>

I'm using the p-table from PrimeNG, in one of td, it will show this icon when the whole row is selected. but the issue is if i select this svg icon when the icon is shown, it will disappear because the unselect event is triggered. i need to add the ui-clickable to let the p-table ignore the mouseEvent from this svg. Any help is appreciated.

question from:https://stackoverflow.com/questions/65895666/add-class-name-to-the-generated-svg

Answer 1

you has a fill="#FFF", this makes difficult change the color, if you has fill="currentColor" you simply can add a class

<mat-icon class="icon-menu custom-class" ...></mat-icon>

.custom-class
{
  color:red;
}

see stackblitz