角度材质图标不工作

为材质图标添加CSS样式表!

将以下内容添加到索引中。html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

参考- https://github.com/angular/material2/issues/7948

对于角度6+:

1. npm安装此: npm install material-design-icons

2. 将样式添加到angular。json:

   "styles": [
     "node_modules/material-design-icons/iconfont/material-icons.css"
   ]
   

如果使用SASS,只需将此行添加到主 .scss 文件:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

如果您希望避免从google获取图标,也可以自行托管图标,如中所述 Material Icons Guide :

对于那些希望自行托管web字体的用户,需要进行一些额外的设置 必需的将图标字体放置在某个位置,例如 https://example.com/material-icons.woff 并添加以下CSS 规则:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

此外,呈现图标的CSS规则需要 声明以正确呈现字体。这些规则通常适用 作为Google Web字体样式表的一部分,但需要 自托管字体时手动包含在项目中:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

在我的例子中,应用了一种样式来覆盖字体族。因此,我明确添加了如下字体系列样式:

.material-icons{
    font-family: 'Material Icons' !important;
}

您必须导入 Maticon模块 并在索引中使用以下url。html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

完整的解决方案可以是:

第一步

您必须导入 MatIconModule 在您的项目中,在我的项目中,我将必要的组件导入到一个单独的文件中,然后将其导入到AppModule中,您可以使用它或直接导入它们:

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

第二步

将图标字体加载到 index.html :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

在我的情况下,图标没有显示出来,因为我用了!重要的去掉它会导致图标出现。

在我的例子中,我写的图标名称与任何图标都没有关联。

您可以在此处检查正确的名称: https://material.io/tools/icons/?style=baseline

您可以导入 材质图标 有两种方式。一种是在主索引中导入图标。项目中的html页面。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

另一种方法是导入 材质图标 到主CSS文件,如下所示。

 @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); 

我的意见是将其添加到CSS文件中。

我遇到了图标不为我显示的问题。我遵循了Basavaraj Bhusani提供的步骤,但仍然不起作用。

我发现问题是在我的SCS中 text-transform: uppercase 这导致图标仅显示“arrow\u forward”内容。我必须改变 text-transform: none 在图标上,否则不会渲染。

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }

确保没有覆盖默认值 font-family: 'Material Icons'; 具有更强的CSS选择器,例如:

* :not(i){
    font-family: Nunito !important;
}

上面的CSS示例将更改 <mat-icon> 元素,它们将显示文本而不是图标。

我意识到,在将hammerJs导入到你的应用程序之前,最初没有人谈到安装hammerJs。对于有类似问题的人,您需要首先导入hammerJs,您可以使用NPM、Thread或google CDN进行安装。此答案适用于NPM或纱线的安装:

NPM公司

npm install --save hammerjs

纱线

yarn add hammerjs

安装后,将其导入应用程序的入口点(例如src/main.ts)。

import 'hammerjs';

如果您喜欢使用谷歌CDN,请访问棱角材料以获取更多解释 https://material.angular.io/guide/getting-started

错误的图标名称 :某些材质图标名称错误。

例如 : Material Icon 提供 filter\u alt 对于

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

但它出现了 😟

修复: 我们必须使用 filter\u list\u alt 漏斗型图标为

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>

首先,请考虑需要在项目中插入样式:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

如果它没有解决问题,我猜是因为你使用了另一种字体,还添加了!对于字体很重要,请尝试以您的样式添加以下代码。css(或style.scss)是对整个项目产生影响的通用/公共css文件:

md-icon{
  font-family: 'Material Icons' !important;
}

请参阅以下答案: https://github.com/angular/components/issues/5863#issuecomment-316307387

如果覆盖了某些现有的角度材质样式或以某种方式影响图标的任何其他样式,则可能会导致问题。将图标代码移到任何样式和测试之外。

对我来说,它是字体变体:小写字母;

所以我把它移到了子元素。下面是角度材质栅格的一部分。

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>

**Add following code to your css**

 .material-icons {  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;

    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}