如何在 Material 中更改 mat-icon 大小 [英] How to change mat-icon size in Material

问题描述

这个问题来自 Material2 Github repo.

This question comes from the Material2 Github repo.

我仍然无法为包含在自定义组件中的 Material 组件设置样式.

I still have problems to style a Material component that is wrapped in a custom component.

我有一个 组件，其中包含

I have a <logo> component that contains <md-icon svgIcon="logo"></md-icon>

添加:

:host { 
   .mat-icon {
    width: 100px;
    height: 100px;
    font-size: 56px;
  }
}

不适用于我的自定义组件中的 Material 组件.

Will not apply to the Material component inside my custom component.

推荐答案

UPDATE: 2019-05-22

较新版本的 Material Design 可以选择将 [inline]="true" 设置为 HTML 元素的属性.

Newer versions of Material Design has the option to set [inline]="true" as a property on the HTML element.

我建议改用这种方法.

<mat-icon svgIcon="thumbs-up" inline="true"></mat-icon>

使用时，图标将从父容器继承！

When using this, the icon will inherit from the parent container!

GLHF！:)

我收到了一些关于这个的问题，所以我只是想举一个更清晰的例子来说明如何使用它...

I have been getting some questions about this so I just wanted to make a clearer example of how to use it...

/* 1. Add this mixin to a "global" scss */

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
  line-height: $size;
}

/* 2. Then use it like this in you component scss */

mat-icon {
  @include md-icon-size(32px);
}

示例用法

<mat-icon class="myIcon" svgIcon="search"></mat-icon>

:host {
  .myIcon {
    &mat-icon {
      @include md-icon-size(32px);
    }
  }
}

这篇关于如何在 Material 中更改 mat-icon 大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！