繁体   English   中英

如何更改 Angular Material 上垫子图标的大小? [复制]

How to change size of mat-icon on Angular Material? [duplicate]

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

Angular Material 的 mat-icon 标签的默认大小始终为 24px。 那么如何改变它......?

.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
7 个回复

字体大小往往会弄乱位置。 我做这样的事情:

<mat-icon class="icon-display">home</mat-icon>

CSS:

.icon-display {
   transform: scale(2);
}

其中 2 实际上可以是任何数字。 2 原尺寸翻倍。

由于 Angular Material 使用 ' Material Icons ' Font-Family,图标大小取决于font-size

因此,如果您想修改图标的大小,那么您可以在 CSS 文件中更改其字体大小

例如,

.mat-icon {
  font-size: 50px;
}

除了设置字体大小之外,为了正确包裹字体,您还需要调整高度和宽度

如果你想在全球范围内做到这一点:

.mat-icon {
    font-size: 50px;
    height: 50px ;
    width: 50px;
}

如果您只想将大小应用于某些图标

.customIconSize {
    font-size: 50px;
    height: 50px ;
    width: 50px ;
}

在你的 HTML 模板中

<button mat-icon-button>
    <mat-icon class="customIconSize">visibility</mat-icon>
</button>

您还应该更改宽度和高度,以便容器与字体大小匹配。

根据您的用例,mat-icon 的一个很好的功能是 [inline] 的 bool 输入,将其设置为 true,它将自动调整大小到它所包含的元素。

创建与实际函数匹配的类名。 它变得更容易记住、使用和扩展它。

.icon-2x {
    transform: scale(2);
}

.icon-3x {
    transform: scale(3);
}

“字体大小”方法仅适用于常规(基于字体)大小调整。 因此,它不适用于 svg 图标,到目前为止,调整大小对我来说真正有效的唯一方法是放大/缩小它。

首先尝试使用:

.mat-icon{
    font-size: 10px;
}

如果不能,请尝试以下方法:

.mat-icon {
    width: 10px;
}

祝你好运 !!!

要更改整个项目的mat-icon字体大小,我创建了一个icon.css文件并将其添加到angular.json

icon.css内容:

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px; // Changing font-size for whole project
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

angular.jsonicon.css文件添加到build的样式:

...

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    ...,
    "styles": [
        {
        "input": "src/assets/app-theme.scss -- if any"
        },
        "src/styles.scss -- if any",
        "src/assets/angular-material/icon.css"

...

注意:根据您的项目包括样式表

3 通过Angular更改离子图标的颜色

我正在尝试更改离子图标的颜色。 像在线(绿色),空闲(琥珀色)和离线(灰色)一样。 所以基本上我是通过http请求获取数据的,它工作正常。 它显示正确的数据,但我无法显示在线状态。 这是我要更改颜色的图标&lt;i class="icon icon ion-person"&gt;& ...

4 单击时如何更改角度材料表中特定行的垫子图标的颜色?

我有一个带有列的垫表:名称和情节。 我尝试过的 html、.ts 和 .css 代码如下: .html .ts .css 目前,如果我点击任何行的图标,所有行中垫子图标的颜色都会改变,如果我第二次点击,所有行的颜色都会再次改变。 我想更改我单击的特定行的垫子图标的颜色,而不是 ...

5 单击时如何更改垫子图标?

我在 Angular 中使用 mat-menu,如果我点击,我想更改 mat-icon,但事情没有按我预期的那样工作。 我可能做错了什么? 这是我的 app.html: 和我的 app.ts ...

2018-04-29 10:33:07 3 6075   angular
6 可以禁用角材料中垫子图标的制表位吗?

我正在使用角材料供用户输入密码。 我也有开关,它允许我显示或屏蔽文本输入。 这一切都很好,除了我想找到一种方法来删除眼睛图标,该图标将字段从 Tab 键顺序从文本更改为密码。 现在,如果我在输入字段中并点击选项卡,我的下一站是垫子图标。 有没有不能停在垫子图标上? ...

7 如何正确改变带有角度的垫子图标的颜色?

我查看了文档,并尝试更改垫子图标的颜色,如下所示: 以上是元素在html中的外观。 我试图通过添加带有白色的类来更改图标的颜色。 哪个不起作用。 我尝试添加指令color =“ primary”,该指令在我所有看起来像这样的按钮都无效的情况下 会收到颜色。 我想让我的Ma ...

8 带有垫子图标的垫子选择触发器未显示在 div 元素中

我试图在我的代码的某些部分使用 mat-trigger 和 mat-icon 并且一切都很好,但是当我尝试在一个 div 元素中使用它时,该元素具有一些用于在 div 中设置内容样式的类,内容没有不再显示。 出于我的目的,我需要将此样式应用于 div。 有什么方法可以再次显示我的 div 内容并保持 ...

10 垫子图标未显示

所以我在一个小公司项目上工作,我正在使用这个npm 包版本 3.0.1 作为材料设计图标。 我可以显示图标,例如: 但我无法显示: 我发现当我使用: 它向我显示了这个图标: 以下是工作图标与不工作图标的外观: 关于如何使图标出现的任何想法,或者有没有人知道为什么这些图标没有出 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM