關於museui 使用toast 和Message 插件，圖標不顯示問題

本文以vue+museui為例子

首先使用npm 安裝museui 和 toast 、message插件

//安裝 museui
npm i muse-ui -S
//安裝toast插件
npm install muse-ui-toast -S
//安裝message插件
npm install -S muse-ui-message

然后 在 main.js 中添加

import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';
Vue.use(MuseUI);
const ToastOption = {
    position: 'top', // 彈出的位置
    time: 2000, // 顯示的時長
    closeIcon: 'close', // 關閉的圖標
    close: true, // 是否顯示關閉按鈕
    successIcon: 'check_circle', // 成功信息圖標
    infoIcon: 'info', // 信息信息圖標
    warningIcon: 'priority_high', // 提醒信息圖標
    errorIcon: 'warning' // 錯誤信息圖標
}
import Toast from 'muse-ui-toast';
Vue.use(Toast, ToastOption);

import Message from 'muse-ui-message';
import 'muse-ui-message/dist/muse-ui-message.css';
Vue.use(Message);

這時候 組件中調用$toast.error()和$message.error()方法彈出的提示中圖標都是不顯示的,后來發現需要引入一個css圖標文件

<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css"/>    

這樣就可以了

僅做學習記錄，同時希望能幫到遇見這個問題的你。