Google Icon
Google 提供了常见Icon集合,方便用户使用。目前有两个版本,Version1支持形状,填充和圆角等供用户选择。
Version2的功能更加强大,在第一版的基础上,支持调节线条的粗细。
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-round
的class
名
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
}
效果图