Чтобы изменить вид в Angular (без перезагрузки страницы), вам нужны Маршрутизаторы.
Вы можете обернуть ваш значок внутри тега привязки <a> и использовать routerLink, чтобы определитьпросмотр, который вы хотите загрузить, когда пользователь нажимает на значок.
Например, , вы создаете сайт электронной торговли, где у вас есть значок для контактов и один для корзины покупок.Вы можете определить представление для каждого значка следующим образом:
<a routerLink="/contacts" routerLinkActive="active">
<mat-icon matSuffix>contacts</mat-icon>
</a>
<a routerLink="/shopping_cart" routerLinkActive="active">
<mat-icon matSuffix>shopping_cart</mat-icon>
</a>
Таким образом, когда пользователь нажимает contacts icon, contactsComponent будет загружен в ваше представление, и URL изменится на yourwebsite.com/contacts.
Подробнее о маршрутизаторах и material-icon .