这个问题来自material Github repo.

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

我有一个<logo>的组件,包含<md-icon svgIcon="logo"></md-icon>

添加:

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

不会应用于我的自定义组件内的material 组件.

推荐答案

UPDATE: 2019-05-22

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

我建议改用这种方法.

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

使用此选项时,图标将从父容器继承!

GLHF!:)


我一直收到一些关于这方面的问题,所以我只是想更清楚地举例说明如何使用它……

/* 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);
    }
  }
}

Angular相关问答推荐

cat Owl carousel 位置下一个和上一个图片

Angular 信号:编程信号量

如何在滑动滑块中获取当前项目的索引?

要素存储更改根存储状态

截获火灾前调用公共接口

Angular 16+使用ngTemplateOutlet有条件地呈现几个模板中的一个

所有返回缺少权限或权限不足的FireBase项目.

如何将表单作为Angular 分量输入传递?

路由链接不在 Ionic 中执行

Rxjs Observable:仅为第一个订阅者获取 HTTP 数据,为其余订阅者获取缓存数据

rxjs 这种常见的状态管理模式有名称吗?它有限制吗?

在ionic 5中获取url传递的参数

Angular2 ngFor跳过第一个索引

如何将新的 FormGroup 或 FormControl 添加到表单

无法获得 angular-material md-sidenav 的 100% 高度

material Angular手风琴header/title高度

为什么我们需要`ngDoCheck`

如何使用依赖注入扩展组件?

Angular2中是否有像window.onbeforeunload这样的生命周期钩子?

提交后在Angular 2中重置表单