@font-face {
  font-family: "Material Design Icons";
  src: url("./materialdesignicons-webfont.woff2?v=7.2.96") format("woff2"),
       url("./materialdesignicons-webfont.woff?v=7.2.96") format("woff"),
       url("./materialdesignicons-webfont.ttf?v=7.2.96") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.mdi:before,
.mdi-set:before {
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 常用图标 */
.mdi-magnify:before { content: "\F0349"; }
.mdi-account-group:before { content: "\F0849"; }
.mdi-chevron-up:before { content: "\F0143"; }
.mdi-chevron-down:before { content: "\F0140"; }
.mdi-account:before { content: "\F0004"; }
.mdi-chat:before { content: "\F0B79"; }
.mdi-phone:before { content: "\F03F2"; }
.mdi-video:before { content: "\F0571"; }
.mdi-dots-vertical:before { content: "\F01D8"; }
.mdi-close:before { content: "\F0156"; }
.mdi-plus:before { content: "\F0415"; }
.mdi-pencil:before { content: "\F03EB"; }
.mdi-check:before { content: "\F012C"; }
.mdi-chevron-right:before { content: "\F0142"; }
.mdi-emoticon:before { content: "\F01F2"; }
.mdi-paperclip:before { content: "\F03E2"; }
.mdi-image:before { content: "\F02E9"; }
.mdi-send:before { content: "\F0488"; }
.mdi-chat-outline:before { content: "\F0B7A"; }
.mdi-volume-high:before { content: "\F057F"; }
.mdi-volume-off:before { content: "\F0581"; }
.mdi-dots-horizontal:before { content: "\F01D7"; }
.mdi-microphone:before { content: "\F36C"; }
.mdi-plus-circle:before { content: "\F0416"; }
.mdi-camera:before { content: "\F0100"; }
.mdi-folder:before { content: "\F024B"; }
.mdi-refresh:before { content: "\F0450"; }
.mdi-menu:before { content: "\F035C"; }
.mdi-login:before { content: "\F034A"; }
.mdi-robot:before { content: "\F046A"; }
.mdi-apps:before { content: "\F003B"; }
.mdi-puzzle:before { content: "\F0438"; }
.mdi-play-box:before { content: "\F040C"; }
.mdi-store:before { content: "\F04D1"; }
.mdi-email:before { content: "\F01F0"; }
.mdi-pencil:before { content: "\F03EB"; }
.mdi-logout:before { content: "\F034B"; }
.mdi-loading:before { content: "\F0332"; }
.mdi-spin:before { 
  animation: spin 1s linear infinite; 
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}