我正在尝试创建一个包含图标的工具栏。单击此图标后,它应该打开一个搜索栏,请找到随附的两个屏幕截图:
我发现这个动画不错的网站是https://material.io/resources/icons/?style=baseline
我已经尝试设置一个普通的工具栏,只包含一个输入,但是没有用。
这是我尝试过的代码:
<mat-toolbar color="primary" >
<mat-toolbar-row>
<span>
<img class="logo" src="../assets/eatsmarticon.png">
</span>
<span>
<p class="toolbarname"> L O C A T I O N S</p>
</span>
<mat-form-field class="example-full-width">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
<span class="example-spacer"></span>
<a routerLink="locations">
<mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">filter</mat-icon>
</a>
</mat-toolbar-row>
</mat-toolbar>
答案 0 :(得分:0)
添加材质图标的结构为<mat-icon class="material-icons">filter</mat-icon>
,因此请确保已将角度材质库导入到您的应用程序中,并将MatIconModule导入到app.module.ts