menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
widgets
组件
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布,查看 mdui 2 开发文档

图标

MDUI 内置了 Material Icons 的 932 个图标,除了这些图标,你也可以使用第三方的图标。

使用示例

我们列出了所有 Material Icons 的图标,你可以直接点击图标复制图标代码。

Example
<i class="mdui-icon material-icons">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-red">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-theme">check_box</i>

如果图标用在扁平按钮或浮动按钮中,还需要添加类 mdui-icon-leftmdui-icon-right 使图标位于按钮左侧或右侧。

Example
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon mdui-icon-left material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-yellow mdui-ripple">
  <i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-yellow" disabled>
  <i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>

第三方图标库

要使用第三方图标库,需要先引入第三方图标库的 CSS 文件。

然后在 <i> 元素中添加类 mdui-icon 和对应图标库的类名。

下面的实例使用的是 ionicons 的图标。

Example
<link rel="stylesheet" href="ionicons.css">

<i class="mdui-icon ion-plus-circled"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-red"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-theme"></i>
<button class="mdui-btn mdui-ripple mdui-btn-icon">
  <i class="mdui-icon ion-plus-round"></i>
</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon mdui-icon-left ion-share"></i> Share
</button>
<button class="mdui-btn mdui-ripple mdui-fab mdui-color-theme-accent">
  <i class="mdui-icon ion-plus-round"></i>
</button>

CSS 类名列表

类名效果
.mdui-icon定义图标元素
.material-icons定义 Material Icons 图标元素
.mdui-icon-left使图标位于按钮左侧
.mdui-icon-right使图标位于按钮右侧