首页 文章

如何使用图标而不是文本填充Angular Material下拉列表

提问于
浏览 次
1

我有一个模板驱动的表单，我希望其中一个下拉列表有一个字体真棒图标列表出现，但我无法这样做 .

就像是：

enter image description here

enter image description here

我正在使用模板驱动表单和Angular Material beta版本，使用md而不是mat组件 .

这是我现在直到尝试的东西：

<md-select placeholder="Icon" [(ngModel)]="actionHook.icon" name = "icon">
  <md-option *ngFor="let icon of icons" [value]="icon.value">
    <img class="fa-address-book"/>
  </md-option>
</md-select>

但它显示出来，即使我无法以嵌套的形式获得它 . 如何在一个下拉列表中显示所有图标，其中值是类名，显示是图标图像？

angular font-awesome angular-material2

1 回答

  • 1

    <img> 标签需要src属性才能工作：

    <img with="10" height="10" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">

    如果你想使用fontawesome类，那么使用 <i> 或'标签：

    ...
    <i class="fa-address-book"></i>
...

    要么

    ...
    <span class="fa-address-book"></span>
...

    Here是一个带有 md 前缀的工作演示

    回复于

相关问题