protractor how to select element by svg or ng-click - protractor

Question

I'm trying to click this element:
<a ng-click="vm.showEditOpportunity(3122)" class="btn btn-sm">
<svg class="svg-inline--fa fa-pencil-alt fa-w-16" style="color: #4b286d;"
data-toggle="tooltip" title="Edit this Opportunity"
aria-labelledby="svg-inline--fa-title-381" data-prefix="fas" data-icon="pencil-alt"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<title id="svg-inline--fa-title-381">Edit this Opportunity</title>
<path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17
0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1
60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4
11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3
0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3
0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5
5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z
</path>
</svg>
</a>
I have tried the following but none works, with error "no element found using locator: XXXXXX". What is the proper way of clicking this element?
element(by.css('[ng-click="vm.showEditOpportunity(3122)"]')).click();
element(by.xpath("//a[contains(text(),'vm.showEditOpportunity(3122)')]")).click();
element(by.xpath("//svg[#title='Edit this Opportunity']")).click();

Answer 1

Had the same problem with elements with ng-click. Describing them through the ng-click is fine, but the only way it works for me is to wait for visibility of the element with ExpectedConditions.
var element = element(by.css('[ng-click="vm.showEditOpportunity(3122)"]'));
browser.ignoreSynchronization = true;
browser.wait(protractor.ExpectedConditions.visibilityOf(element),500);
element.click();