Save server icon to a local folder.

app/renderer/css/main.css

@@ -98,7 +98,9 @@ html, body {
 
 .tab .server-tab {
     background: #a4d3c4;
-    background-size: 100%;
+    background-size: 28px;
+    background-repeat: no-repeat;
+    background-position: center;
     border-radius: 4px;
     width: 35px;
     height: 35px;

app/renderer/css/preference.css

@@ -107,10 +107,10 @@ body {
 
 img.server-info-icon {
     background: #a4d3c4;
-    background-size: 100%;
     border-radius: 4px;
-    width: 44px;
+    width: 28px;
-    height: 44px;
+    height: 28px;
+    padding: 8px;
 }
 
 .server-info-left {

app/renderer/js/components/server-tab.js

@@ -9,7 +9,7 @@ class ServerTab extends Tab {
 	template() {
 		return `<div class="tab">
 					<div class="server-tab-badge"></div>
-					<div class="server-tab" style="background-image: url(${this.props.icon});"></div>
+					<div class="server-tab" style="background-image: url('${this.props.icon}');"></div>
 					<div class="server-tab-shortcut">${this.generateShortcutText()}</div>
 				</div>`;
 	}

app/renderer/js/pages/preference/new-server-form.js

@@ -64,9 +64,9 @@ class NewServerForm extends BaseComponent {
 					url: domain,
 					icon: this.$newServerIcon.value
 				};
-				DomainUtil.addDomain(server);
+				DomainUtil.addDomain(server).then(() => {
-
+					this.props.onChange(this.props.index);
-				this.props.onChange(this.props.index);
+				});
 			}, errorMessage => {
 				alert(errorMessage);
 			});

app/renderer/js/utils/domain-util.js

@@ -3,10 +3,13 @@
 const {app} = require('electron').remote;
 const JsonDB = require('node-json-db');
 const request = require('request');
+const fs = require('fs');
+const path = require('path');
 
 let instance = null;
 
 const defaultIconUrl = __dirname + '../../../img/icon.png';
+
 class DomainUtil {
 	constructor() {
 		if (instance) {
@@ -41,8 +44,19 @@ class DomainUtil {
 	}
 
 	addDomain(server) {
-		server.icon = server.icon || defaultIconUrl;
+		return new Promise((res, rej) => {
-		this.db.push('/domains[]', server, true);
+			if (server.icon) {
+				this.saveServerIcon(server.icon).then((localIconUrl) => {
+					server.icon = localIconUrl;
+					this.db.push('/domains[]', server, true);
+					res();
+				});
+			} else {
+				server.icon = defaultIconUrl;
+				this.db.push('/domains[]', server, true);
+				res();
+			}
+		});
 	}
 
 	removeDomains() {
@@ -77,6 +91,31 @@ class DomainUtil {
 			});
 		});
 	}
+
+	saveServerIcon(url) {
+		// The save will always succeed. If url is invalid, downgrade to default icon.
+		const dir = `${app.getPath('userData')}/server-icons`;
+
+		if (!fs.existsSync(dir)){
+			fs.mkdirSync(dir);
+		}
+
+		return new Promise((res, rej) => {
+			const filePath = `${dir}/${new Date().getMilliseconds()}${path.extname(url)}`;
+			let file = fs.createWriteStream(filePath);
+			console.log(filePath);
+			try {
+				let req = request(url);
+				req.on('response', response => {
+					response.pipe(file);
+					res(filePath);
+				});
+			} catch (error) {
+				console.log(error);
+				res(defaultIconUrl);
+			}
+		});
+	}
 }
 
 module.exports = new DomainUtil();