Icon 图标

Icon 图标图标用于表示常见的操作。它支持 Material Icons 图标，也支持使用 SVG 图标。

使用方法

按需导入组件：

import 'mdui/components/icon.js';

按需导入组件的 TypeScript 类型：

import type { Icon } from 'mdui/components/icon.js';

使用示例：

使用 Material Icons 图标

如果需要通过该组件使用 Material Icons 图标，你需要单独导入 Material Icons 的 CSS 文件。Material Icons 共有 5 种变体，分别为：Filled、Outlined、Rounded、Sharp、Two Tone，请根据你要使用的图标变体，导入对应的 CSS 文件：

href="https://fonts.googleapis.com/icon?family=Material+Icons"

rel="stylesheet"

/>

href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"

rel="stylesheet"

/>

href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"

rel="stylesheet"

/>

href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"

rel="stylesheet"

/>

href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"

rel="stylesheet"

/>

使用组件时，在 name 属性中传入图标名称，并以图标变体名称为后缀（Filled 变体无需添加后缀），下面是 delete 图标的 5 种变体的使用方式：

你可以直接在页面下方的 Material Icons 图标搜索 工具中搜索图标，然后点击需要使用的图标，就会自动将图标代码复制到剪贴板。

另外，mdui 还提供了一个独立的包 @mdui/icons，这个包里每一个图标组件都是一个独立的文件，使你可以按需导入需要的图标组件，而无需导入整个图标库。

使用 SVG 图标

该组件也支持使用 SVG 图标作为图标内容。可通过组件的 src 属性传入 SVG 图标的链接。例如：

也可以在组件的 default slot 中传入 SVG 的内容。例如：

示例

设置颜色

设置 元素或父元素的 color CSS 样式修改图标颜色。

源码

设置大小

设置 元素或父元素的 font-size CSS 样式修改图标大小。

源码API属性HTML 属性JavaScript 属性Reflect类型默认值namenamestring-Material Icons 图标名

srcsrcstring-svg 图标的路径

Slots名称默认svg 图标的内容

Material Icons 图标搜索FilledOutlinedRoundedSharpTwo tone图标名称组件代码 上一章Fab 浮动操作按钮下一章 Layout 布局