标签: google-material-icons

谷歌已经用4个新的预设主题改进了其Material Design Icons:

除了常规的填充/基线主题外,还有轮廓,圆角,双色和夏普:

但是,不幸的是,它并没有说任何地方如何使用新的主题.

我一直通过谷歌网络字体使用它包括链接:

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

然后使用文档中建议的所需图标:

<i class="material-icons">account_balance</i>

但它总是显示'填充/基线'版本.

我尝试过以下操作来使用Outlined主题:

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

并将Web Fonts链接更改为:

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

等但它不起作用.

在那样的黑暗中拍摄是没有意义的.

tl;博士:有没有人尝试过使用新主题？它甚至像基线版本(内联html标签)一样工作吗？或者,它是否只是以SVG或PNG格式下载？

提前致谢.

材料图标在我的项目中无法正确呈现,我安装正确,但即使没有在浏览器中显示.

我按照以下步骤:

npm install material-design-icons

.angular-cli.json

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

app.module.ts

import {MatSidenavModule, MatToolbarModule, MatIconModule} from '@angular/material';

app.component.html

<mat-toolbar-row>
    <span>Second Line</span>
    <span class="example-spacer"></span>
    <mat-icon class="example-icon">verified_user</mat-icon>
  </mat-toolbar-row>

当Google的JS无法将其转换为图标时,如何防止显示材料图标文本？

图标在标记中定义如下:

<span class="material-icons">icon_name</span>

示例:https://archive.fo/CKqKG/scr.png(请参阅按钮的顶行).

材料图标文档:https://material.io/icons/

这也是谷歌搜索中的一个问题,谷歌实际上会读取并保存div的文本,而不是忽略它.

示例:https://i.imgur.com/TixS06y.png

我知道一种解决方案是简单地切换到.PNG(由Google提供).我想在用户的系统上做更少(网络)负载的任何结果.

谢谢!

最近,我开始研究一个包含一些带有某些字段的表的项目,我想通过图标一侧的MaterialiseCSS添加一些Material Design Icons.看看图像,你可能会得到它

:

我尝试了一切,垂直对齐,内联(-block),flex,以及我在堆栈溢出中找到的所有内容.所以不,这不是重复,我真的需要帮助.谢谢.

如何在以下CSS内容属性中插入Google Material Icon"chevron icon right"(https://design.google.com/icons/#ic_chevron_right):

.bullet li a:before {
    content: "";
}

通过Vuetify 的v-icon组件,使用主流材料设计图标非常简单,如:

<v-icon>home</v-icon>

现在,我想知道是否支持动画素材图标,并且可以类似的方式在Vuetify中使用 - 我的意思是如果可能的话,无需添加额外的css代码行等.

在示例中,我注意到fa-spinFont Awesome 的用法; 但它超出了范围.我被绑定到Google的素材图标库.

编辑:我需要的特定行为类型在转换部分的视频示例中:https://material.io/design/iconography/animated-icons.html# [ 单击时play按钮如何变为pause平滑动画] .

我可以使用@material-ui/iconssvg 图像作为其他元素的背景吗？尝试了下面的代码但没有成功。

import CarIcon from '@material-ui/icons/DriveEtaRounded';

const carIcon = <CarIcon />

function Cover(){
  return (
    <div
        className={classes.cover}
        style={{ backgroundImage: 'url('+ carIcon+')' }}
    />
  )
}

Jetpack Compose 有一个Icon可组合项，我可以在其中访问imageVector. 请参阅下面的示例。

Icon(
     imageVector = Icons.Rounded.Email,
     contentDescription = "Email Icon",
)

为什么我无法通过此 imageVector 访问此 Material Icons 库中列出的所有图标。例如，“wifi_off”无法访问。有一个非常有限的图书馆可以通过imageVector

https://fonts.google.com/icons?selected=Material+Icons&icon.style=Rounded&icon.platform=android

我想Google Material Icon在按钮悬停上更改(实际图标本身).我想只用HTML和做这个CSS.我希望它从"加号"图标变为类似"检查"图标的东西,特别是使用"完成"图标.Codepen下面.谢谢

.material-icons.md1 {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 33px;
    margin-top: 12px;
}
.btnwrap {
    position: fixed;
    z-index: 2;
    height: 60px;
    width: 300px;
    background-color: #074fb2;
    font-size: 20px;
    display: block;
    text-align: center;
    vertical-align: middle;
    line-height: 60px;
    color: #fff;
    border-radius: 50px;
    cursor: pointer;
}
.btntext1 {
    position: absolute;
    left:85px; 
    transition: all .1s;
}
.btntext2 {
    position: absolute;
    width: 100%;
    transition: all .2s;
    opacity: 0;
}
.innerbtn {
    z-index: 1;
    position: relative;
    float: …

Material ui 芯片组件文档一次显示一个关闭图标或完成图标。有什么办法可以同时显示两者

  <Chip
    label="name"
     onDelete={handleDelete}
     />

我尝试添加 DoneIcon ，但它显示在左侧。我希望 DoneIcon 和删除图标都在芯片内标签的右侧。

     <Chip
    label="name"
     onDelete={handleDelete}
     icon={<DoneIcon/>}
     />