@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-25..200");

.icon {
  display: inline-block;
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: normal;
  font-size: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;

  /* Material Symbols 可变字体 */
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;

  /* 防止图标参与文字选取时很奇怪 */
  user-select: none;

  /* 字体渲染 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   基础颜色
   ========================================================= */

.icon-primary {
  color: var(--link-color, #49b1f5);
}

.icon-muted {
  color: var(--text-color, #858585);
  opacity: 0.7;
}


/* =========================================================
   常用图标
   ========================================================= */

.icon-home::before {
  content: "home";
}

.icon-menu::before {
  content: "menu";
}

.icon-close::before {
  content: "close";
}


.icon-settings::before {
  content: "settings";
}

.icon-person::before {
  content: "person";
}

.icon-login::before {
  content: "login";
}

.icon-logout::before {
  content: "logout";
}


/* =========================================================
   文章 / 博客
   ========================================================= */

.icon-article::before {
  content: "article";
}

.icon-description::before {
  content: "description";
}

.icon-edit::before {
  content: "edit";
}

.icon-create::before {
  content: "create";
}

.icon-delete::before {
  content: "delete";
}

.icon-bookmark::before {
  content: "bookmark";
}

.icon-bookmark-filled::before {
  content: "bookmark";
}

.icon-push-pin::before {
  content: "push_pin";
}

.icon-label::before {
  content: "label";
}

.icon-folder::before {
  content: "folder";
}

.icon-folder-open::before {
  content: "folder_open";
}


/* =========================================================
   导航 / 箭头
   ========================================================= */

.icon-arrow-back::before {
  content: "arrow_back";
}

.icon-arrow-forward::before {
  content: "arrow_forward";
}

.icon-arrow-upward::before {
  content: "arrow_upward";
}

.icon-arrow-downward::before {
  content: "arrow_downward";
}

.icon-chevron-left::before {
  content: "chevron_left";
}

.icon-chevron-right::before {
  content: "chevron_right";
}

.icon-expand-more::before {
  content: "expand_more";
}

.icon-expand-less::before {
  content: "expand_less";
}

.icon-open-in-new::before {
  content: "open_in_new";
}


/* =========================================================
   社交 / 网站
   ========================================================= */

.icon-link::before {
  content: "link";
}

.icon-link-off::before {
  content: "link_off";
}

.icon-share::before {
  content: "share";
}

.icon-public::before {
  content: "public";
}

.icon-email::before {
  content: "mail";
}

.icon-phone::before {
  content: "phone";
}


/* =========================================================
   媒体
   ========================================================= */

.icon-image::before {
  content: "image";
}

.icon-photo-camera::before {
  content: "photo_camera";
}

.icon-video::before {
  content: "videocam";
}

.icon-music::before {
  content: "music_note";
}

.icon-play::before {
  content: "play_arrow";
}

.icon-pause::before {
  content: "pause";
}

.icon-stop::before {
  content: "stop";

}

.icon-volume-up::before {
  content: "volume_up";
}

.icon-volume-off::before {
  content: "volume_off";
}


/* =========================================================
   状态 / 提示
   ========================================================= */

.icon-info::before {
  content: "info";
}

.icon-warning::before {
  content: "warning";
}

.icon-error::before {
  content: "error";
}

.icon-success::before {
  content: "check_circle";
}

.icon-help::before {
  content: "help";
}

.icon-notifications::before {
  content: "notifications";
}

.icon-notifications-off::before {
  content: "notifications_off";
}


/* =========================================================
   时间 / 日历
   ========================================================= */

.icon-calendar::before {
  content: "calendar_month";
}

.icon-time::before {
  content: "schedule";
}

.icon-history::before {
  content: "history";
}

.icon-update::before {
  content: "update";
}


/* =========================================================
   喜欢 / 收藏
   ========================================================= */

.icon-heart::before {
  content: "favorite";
}

.icon-heart-outline::before {
  content: "favorite";
}

.icon-star::before {
  content: "star";
}

.icon-star-outline::before {
  content: "star";
}

.icon-thumb-up::before {
  content: "thumb_up";
}


/* =========================================================
   代码 / 开发
   ========================================================= */


.icon-terminal::before {
  content: "terminal";
}

.icon-database::before {
  content: "database";
}

.icon-cloud::before {
  content: "cloud";
}

.icon-download::before {
  content: "download";
}

.icon-upload::before {
  content: "upload";
}

.icon-refresh::before {
  content: "refresh";
}


/* =========================================================
   Material Symbols 样式变体
   ========================================================= */

/* 实心 */
.icon-fill {
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/* 更粗 */
.icon-bold {
  font-variation-settings:
    "FILL" 0,
    "wght" 600,
    "GRAD" 0,
    "opsz" 24;
}

/* 更细 */
.icon-light {
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 24;
}

/* =========================================================
   Other
   ========================================================= */

.icon-animation::before {
  content: "animation";
}

.icon-mood::before {
  content: "mood";
}

.icon-checkroom::before {
  content: "checkroom";
}

.icon-dark-mode::before {
  content: "dark_mode";
}

/* =========================================================
   常用尺寸
   ========================================================= */

.icon-xs {
  font-size: 14px;
}

.icon-sm {
  font-size: 18px;
}

.icon-md {
  font-size: 24px;
}

.icon-lg {
  font-size: 32px;
}

.icon-xl {
  font-size: 48px;
}


/* =========================================================
   垂直对齐
   ========================================================= */

.icon-middle {
  vertical-align: middle;
}

.icon-text {
  vertical-align: -0.15em;
}


/* =========================================================
   特殊：实心收藏图标
   ========================================================= */

.icon-heart-filled::before {
  content: "favorite";
}

.icon-heart-filled {
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}


/* =========================================================
   特殊：实心星星
   ========================================================= */

.icon-star-filled::before {
  content: "star";
}

.icon-star-filled {
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}


/* =========================================================
   防止 Fluid / Bootstrap 对 <i> 的默认样式造成影响
   ========================================================= */

i.icon {
  font-family: "Material Symbols Outlined";
  font-style: normal;
}