In Angular 2 you can subscribe
(Rx event) to a Router instance.
So you can do things like
class MyClass {
constructor(private router: Router) {
router.subscribe((val) => /*whatever*/)
}
}
Edit (since rc.1)
class MyClass {
constructor(private router: Router) {
router.changes.subscribe((val) => /*whatever*/)
}
}
Edit 2 (since 2.0.0)
see also : Router.events doc
class MyClass {
constructor(private router: Router) {
router.events.subscribe((val) => {
// see also
console.log(val instanceof NavigationEnd)
});
}
}
Override the font size of mat-icon using either of the options.
(I changed md- to mat- for the newest AM version)
For Angular Material 8+, add the following in the components stylesheet:
.mat-icon{
height:48px !important;
width:48px !important;
font-size:48px !important;
}
Demo
For previous versions, add ::ng-deep to reach that class deep in the host. The width and the height should be also set to adjust the backdrop size proportionally.
HTML:
<button mat-button>
<mat-icon class="material-icons">play_circle_filled</mat-icon>
</button>
CSS
::ng-deep .mat-icon{
height:48px !important;
width:48px !important;
font-size:48px !important;
}
Check out the Demo
Or, if you avoid `::ng-deep`, use `ViewEncapsulation.None` (but use sparingly):
Class:
import {ViewEncapsulation} from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None
})
Then you can style directly from the component stylesheet.
CSS:
.mat-icon{
height:48px !important;
width:48px !important;
font-size:48px !important;
}
Demo
Or style it from the main stylesheet, styles.css:
styles.css
.mat-icon{
height:48px !important;
width:48px !important;
font-size:48px !important;
}
Demo
And last, but not the least solution, styling can be done inline:
HTML:
<button mat-button>
<mat-icon style="
height:48px !important;
width:48px !important;
font-size:48px !important;" class="material-icons">play_circle_filled</mat-icon>
</button>
Demo
Best Answer
In my case, this works perfectly. I use newest material (6.2.0)
CSS:
HTML:
The main thing is to set:
[inline]="true"
From the API: