在前端项目中引用Google Icon实现各种图标的显示

Google Icon

Google 提供了常见Icon集合,方便用户使用。目前有两个版本,Version1支持形状,填充和圆角等供用户选择。

Version2的功能更加强大,在第一版的基础上,支持调节线条的粗细。

Google Icon Link

Version 1 的具体实践

Version 1 支持的类型

  • Material+Icons
  • Material+Icons+Outlined
  • Material+Icons+Round
  • Material+Icons+Sharp
  • Material+Icons+TwoTone

示例 1

在项目中引用Google Icon的链接

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

在angular的项目文件中使用Google Icon

html 复制代码
<mat-icon>warning</mat-icon>
<mat-icon>warning_amber</mat-icon>
<mat-icon>warning_amber_outlined</mat-icon>  

效果图

示例2

在项目中引用Google Icon的链接, Material+Icons+Round是圆角的集合

html 复制代码
<link  
href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round"
rel="stylesheet"
/>  

在angular的项目文件中使用Google Round Icon,注意 : 这里要引用material-icons-roundclass

html 复制代码
<mat-icon class="material-icons-round">warning</mat-icon>
<mat-icon class="material-icons-round">warning_amber</mat-icon>  

效果图

Version 2 的具体实践

Version 2 支持的类型

  • Material+Symbols
  • Material+Symbols+Rounded
  • Material+Symbols+Outlined
  • Material+Symbols+Sharp

示例 3

在项目中引用Google Icon Version2的链接

html 复制代码
<link  
href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"  
rel="stylesheet"
/>  

在项目中引用Google Icon的链接

html 复制代码
<mat-icon class="material-symbols-rounded">warning</mat-icon>  

CSS 文件中自定义的设置

css 复制代码
.material-symbols-rounded {  
    font-variation-settings:   
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,  
        'opsz' 24
} 

效果图

相关推荐
Just_Paranoid7 天前
Android 虚拟化框架(AVF)指南
android·google·虚拟化·aosp·avf
Just_Paranoid7 天前
虚拟化环境中的精简版 Android 操作系统 Microdroid
android·google·avf·microdroid
西瓜本瓜@8 天前
在绑定 Google 邮箱的手机设备上,未收到二步验证码通知是什么原因?
google·智能手机·登录
带刺的坐椅10 天前
Google Guice 与 Noear Solon 的简单对照
java·google·solon·guice
Dnelic-11 天前
Android 应用申请 Google MBA权限
android·google·mba·权限·1024程序员节·google bts
盒马盒马1 个月前
Protobuf:基本概念与使用流程
google·protobuf
剑海风云2 个月前
Google大数据架构技术栈
大数据·google·架构·bigdata
孙中明2 个月前
Google的MapReduce和Hadoop的MapReduce基本原理
大数据·前端·hadoop·google·mapreduce·大数据精读周刊
SEO_juper2 个月前
Google Search Console:完整教程
搜索引擎·google·谷歌·工具·seo·数字营销
华研荟2 个月前
谷歌登录的时候,要求在手机的通知点是,并按数字来验证身份,但是手机通知栏没有收到通知和数字,原因是什么,怎么办?
google·gmail·google账号异常·google账号停用