"材质设计"图标大小为节点红色



如何在节点红色仪表板按钮中使用材料设计图标更改图标大小? 使用字体真棒图标,这很容易做到,例如fa-car fa-4x。

这在节点红色仪表板中似乎是不可能的(截至 2018 年 6 月(。

由于字体真棒通过在图标旁边添加一个额外的类来更改图标大小,即<i class="fa fa-car fa-4x"></i>,您可以在节点的图标字段中添加大小类,它将与图标名称一起插入到 UI 中。

但是,Material Design 通过向图标的元素添加类来更改图标大小,即<i class="material-icons md-24">face</i>,或通过在图标的 SVG 容器中嵌入大小。您可以在节点红色仪表板"图标"字段中提供的唯一值是图标的名称,因此无法访问修改大小所需的 HTML 元素。

以下是材料设计"主页"图标在节点红色仪表板中呈现时的外观:

<ng-md-icon ng-if="iconType==='angular-material'" icon="home" class="ng-scope">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
</svg>
</ng-md-icon>

您可以添加一些自定义 CSS 来定位 SVG 元素并更改 viewBox、宽度和高度,但您最多只能全局更改所有图标大小(或者可能是所有特定类型的图标(,并且无法控制单个图标。

最新更新