Placing a Home link in angular material toolbar

Question

I have this markup:

 <mat-toolbar>
   <span>MyAppName</span>
 </mat-toolbar>

Now I want the span to be a link to home, so I did:

 <mat-toolbar>
  <button routerLink="/" mat-button>
    MyAppName
  </button>
</mat-toolbar>

Works as expected except the font size of the caption is, obviously, much smaller. So my assumption is this is not now you address this scenario.

What would be the "native material" way of placing static text and make it work as home link?

Answer 1

The RouterLink directive can be used on other elements, and you can add style to make it interact like a link:

<span [style.cursor]="'pointer'" routerLink="/">MyAppName</span>