使用ng-zorro-antd组件库中的图标组件正确的代码是( )。
时间: 2024-03-06 08:49:11 浏览: 66
使用ng-zorro-antd组件库中的图标组件需要先在组件中引入IconModule,然后在html模板中使用`<i nz-icon type="图标名称"></i>`的方式来展示图标。其中,"图标名称"可以是ng-zorro-antd官方提供的图标名称,也可以是自定义的svg图标名称。下面是一个展示ng-zorro-antd官方提供的"搜索"图标的示例代码:
在组件中引入IconModule:
```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { SearchOutline } from '@ant-design/icons-angular/icons';
import { NzButtonModule } from 'ng-zorro-antd/button';
@NgModule({
imports: [CommonModule, NzIconModule, NzButtonModule],
exports: [NzIconModule, NzButtonModule],
})
export class AntdModule {
constructor() {
// 注册需要使用的图标
this.registerIcons();
}
private registerIcons(): void {
NzIconModule.addIcon(
// 指定图标名称
'search',
// 指定图标路径
SearchOutline,
);
}
}
```
在html模板中使用图标组件:
```html
<!-- 在这里展示搜索图标 -->
<button nz-button nzType="primary">
<i nz-icon nzType="search"></i>
Search
</button>
```
阅读全文