Mike Mai 开发的 MUI-Icon 图标网页组件

使用方法

9:55

<!-- 引入 JavaScript 文件 -->
<script src="path/to/mui-icon.js"></script>

<!-- 然后，在 HTML 中使用该组件 -->
<mui-icon name="access-time" label="派对时间"></mui-icon>

组件属性

<mui-icon> 网页组件接受以下属性：

属性	类型	默认值	描述
`name`	string	必填	以小写字母且用连字符分隔的格式指定要显示的 MUI Icons 图标（例如 `shopping-cart`、`arrow-back`）。
`size`	string	null	控制图标大小。取值：`small`（16 像素 / 1rem）、`medium`（24 像素 / 1.5rem）、`large`（32 像素 / 2rem）、`xlarge`（48 像素 / 3rem）。若省略该设置，则继承其父元素的字体大小。
`label`	string	null	若提供该属性，则会通过 `aria-label` 为屏幕阅读器添加无障碍信息。若省略该属性，图标将被视为装饰性元素，设置 `aria-hidden="true"`。

CSS 自定义属性

该组件还接受以下用于自定义样式的 CSS 自定义属性：

属性	描述
`--icon-size-small`	小码图标的尺寸。
`--icon-size-medium`	中码图标的尺寸。
`--icon-size-large`	大码图标的尺寸。
`--icon-size-xlarge`	加大码图标的尺寸。
`--icon-color`	图标的颜色。

mui-icon {
    --icon-size-small: 1rem;
    --icon-size-medium: 1.5rem;
    --icon-size-large: 2rem;
    --icon-size-xlarge: 3rem;
    --icon-color: crimson;
}

尺寸

null
（继承字体大小）
small
（16px）
medium
（24px）
large
（32px）
xlarge
（48px）

<mui-icon size="xlarge" name="save"></mui-icon>

无障碍性

借助 label 属性，图标可以对辅助技术具有明确意义：

<!-- 有意义的图标 -->
<button>
    <mui-icon label="保存" name="save"></mui-icon>
</button>

<!-- 装饰性图标 -->
<button>
    <mui-icon name="save"></mui-icon>
    <span>保存</span>
</button>

由于没有可见的文本标签，图标需要明确的 label 属性以供辅助技术使用。
由于有可见的文本标签，图标省略了 label 属性。

50个最常用的图标

home
menu
close
search
settings
account-circle
person
email
phone
message
notifications
favorite
star
shopping-cart
add
remove
delete
edit
save
share
download
upload
check
clear
arrow-back
arrow-forward
expand-more
expand-less
more-vert
more-horiz
refresh
location-on
calendar-today
event
access-time
alarm
visibility
visibility-off
lock
lock-open
info
warning
error
help
file-copy
folder
attach-file
link
print
send

预览更多图标

输入任意 MUI Icons 图标名称以动态加载该图标。请使用小写字母并用连字符分隔的格式（例如 shopping-cart，而非 ShoppingCart）。如需查看完整的图标列表，请参阅 MUI Icons 图标文档。