Material You

Icon 图标

基于字体的图标库，也支持网络图片。 字体图标来自 Google Fontsopen in new window

使用

通过Google Fontsopen in new window查看图标字段，写入name属性。

并提供三种type属性，分别对应Google Fontsopen in new window中的 Outlined、Rounded 和 Sharp。

在模板中：

<template>
    <div class="container exmaple-card">
        <m-icon name="search"></m-icon>
        <m-icon name="home"></m-icon>
        <m-icon name="settings"></m-icon>
        <m-icon name="close"></m-icon>
        <m-icon name="menu"></m-icon>
    </div>
</template>

图标尺寸

通过设置size属性调整图标尺寸。属性接收small、medium、large三种预设尺寸尺寸。预设尺寸分别对应 20px 、24px、40px。

在模板中：

<template>
    <div class="container exmaple-card">
        <m-icon name="add_circle" size="small"></m-icon>
        <m-icon name="add_circle" size="medium"></m-icon>
        <m-icon name="add_circle" size="large"></m-icon>
    </div>
</template>

图标填充及线宽

通过设置stokeWidth与fill属性，可以改变图标的填充状态及线宽。

在模板中：

<template>
    <div class="container exmaple-card">
    <m-icon name="verified"></m-icon>
    <m-icon name="verified" fill></m-icon>
    <m-icon name="verified" stokeWidth="700"></m-icon>
    <m-icon name="verified" stokeWidth="200"></m-icon>
</template>

自定义图标库

可以通过设置namespace属性来使用您自己的图标库。假设我们设置一个名为new-icons的字体图标。

<m-icon namespace="new-icons"></m-icon>

在层叠样式表设置样式：

/* 设置字体 */
@font-face {
    font-family: 'new-icons';
    font-weight: normal;
    font-style: normal;
    /* ... */
}

/* 字体样式 */
.new-icons {
    font: normal normal normal 14px/1 'm-icons';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

API

属性

参数说明类型默认值
name图标名称string-
type图标的类型'outlined' | 'rounded' | 'sharp'rounded
size图标的尺寸'small' | 'medium' | 'large' |
number | string		medium
fill图标是否为填充样式booleanfalse
stokeWidth图标的线宽，与fill不能共存‘100’ | ‘200’ | ‘300’ | ‘400’ | ‘500’ |
‘600’ | ‘700’		false
color图标颜色，只适用于字体图标string-
namespace图标的命名空间stringmaterial-symbols-rounded
transitioin过渡动画时间（ms）string | number0