在前端项目中引用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
} 

效果图

相关推荐
围巾哥萧尘2 天前
使用 Nano-banana 完成全套 IP 制作提示词体系🧣
google
小溪彼岸2 天前
Google百万Token上下文Gemini CLI,离AI自由更近一步
google·gemini
pc大老2 天前
优化浏览体验:4个设置让Google Chrome更好用!
chrome·google·谷歌浏览器·谷歌·浏览器设置
程序员爱钓鱼2 天前
Go语言实战案例 — 项目实战篇:任务待办清单 Web 应用
后端·google·go
程序员爱钓鱼3 天前
Go语言实战案例 — 项目实战篇:图书管理系统(文件存储)
后端·google·go
程序员爱钓鱼4 天前
Go语言实战案例 — 工具开发篇:编写一个进程监控工具
后端·google·go
程序员爱钓鱼5 天前
Go语言实战案例 — 工具开发篇:Go 实现条形码识别器
后端·google·go
云雾J视界6 天前
AI时代技术面试重构:谷歌如何用Vibe Coding与抗作弊革命重塑招聘
人工智能·google·面试·重构·谷歌·ai工具·技术面试
深度学习机器6 天前
Embedding Gemma,谷歌发布的小而精向量模型,仅需0.3B|附RAG实战代码
google·llm·openai
Linsk6 天前
如何通过前端工程自动生成字体图标
字体·icon·前端工程化