Search code examples
angularjsangular-ui-routerangularjs-material

Angularjs Material and AngularUI Router cursor

I'm new to Angularjs Material Design and AngularUI Router. I'm trying to build a multi-step form within a md-dialog box that launches from an icon click: 

<div class="text-center">
  <p class="md-body-2">
    Fill out the questionnaire! 
  </p>
  <md-icon class="material-icons md-72" ng-click="showAdvanced($event)">assignment</md-icon>
  <h3 class="md-headline">
    GET STARTED
  </h3>
</div>

For some reason, when I added the AngularUI Router library and hovered over the icon, my cursor was an I-beam instead of the standard pointer.

I easily fixed this by adding style="cursor: pointer;" but wanted to know if anyone else has experienced this and if my fix is adequate.

Thanks!

Solution

  • I don't use material but I think that's pretty normal. You can wrap it in an <a> tag and put your ng-click there for the desired effect, though I don't know if that's semantically correct. In the past I've even made a css class called "linkify" or something similar with the cursor change and any other link-specific styles I wanted.