add square icon back, fix spacing somewhat

src/app/workspace/screen/screenview.less

@@ -143,9 +143,14 @@
 
     .control-iconlist {
         display: flex;
-        padding: 8px 0;
+        margin-left: -2px;
+        padding: 8px 0 8px 2px;
         align-items: flex-start;
-        gap: 12px;
+        gap: 14px;
+        
+        &.tabicon-list {
+            gap: 12px;
+        }
 
         .icondiv {
             width: 20px;
@@ -154,11 +159,30 @@
             position: relative;
             font-size: 14px;
 
+            
+            &.tabicon {
+                display: flex;
+                align-items: center;
+                width: 22px;
+            }
+
             .icon {
                 width: 20px;
                 height: 20px;
             }
 
+            i {
+                padding-left: 3px;
+                padding-right: 3px;
+            }
+
+            .icon.square-icon {
+                position: relative;
+                top: 3px;
+                width: 16px;
+                height: 16px;
+            }
+
             .check-icon {
                 width: 12px;
                 height: 12px;

src/app/workspace/screen/screenview.tsx

@@ -29,6 +29,7 @@ import { ReactComponent as StatusCircleIcon } from "../../assets/icons/statuscir
 import { ReactComponent as ArrowsUpDownIcon } from "../../assets/icons/arrowsupdown.svg";
 import { ReactComponent as CircleIcon } from "../../assets/icons/circle.svg";
 import { ReactComponent as AddIcon } from "../../assets/icons/add.svg";
+import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg";
 
 import "./screenview.less";
 import "./tabs.less";
@@ -114,10 +115,13 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
         return (
             <>
                 <div className="text-s1 unselectable">Select the icon</div>
-                <div className="control-iconlist">
+                <div className="control-iconlist tabicon-list">
+                    <div key="square" className="icondiv" title="square" onClick={() => this.selectTabIcon("square")}>
+                        <SquareIcon className="icon square-icon"/>
+                    </div>
                     <For each="icon" of={TabIcons}>
                         <div
-                            className="icondiv"
+                            className="icondiv tabicon"
                             key={icon}
                             title={icon || ""}
                             onClick={() => this.selectTabIcon(icon || "")}
@@ -173,13 +177,6 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
                         required={true}
                         defaultValue={screen.name.get() ?? ""}
                         onChange={this.updateName}
-                        decoration={{
-                            endDecoration: (
-                                <InputDecoration>
-                                    <i className="fa-sharp fa-regular fa-circle-question"></i>
-                                </InputDecoration>
-                            ),
-                        }}
                     />
                 </div>
                 <div className="newtab-spacer" />

src/app/workspace/screen/tabs.less

@@ -240,9 +240,18 @@
         cursor: pointer;
         position: relative;
 
-        .icon {
-            width: 1.1em;
-            margin: 0 1em;
+        .icon.svg-icon {
+            margin: 0 12px;
+
+            svg {
+                width: 14px;
+                height: 14px;
+            }
+        }
+
+        .icon.fa-icon {
+            font-size: 16px;
+            margin: 0 12px;
         }
 
         .tab-name {

src/app/workspace/screen/tabs.tsx

@@ -104,11 +104,15 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> {
 
     renderTabIcon = (screen: Screen): React.ReactNode => {
         const tabIcon = screen.getTabIcon();
-        if (tabIcon === "default") {
-            return <SquareIcon className="icon left-icon" />;
+        if (tabIcon === "default" || tabIcon === "square") {
+            return (
+                <div className="icon svg-icon">
+                    <SquareIcon className="left-icon" />
+                </div>
+            );
         }
         return (
-            <div className="icon">
+            <div className="icon fa-icon">
                 <i className={`fa-sharp fa-solid fa-${tabIcon}`}></i>
             </div>
         );

wavesrv/pkg/cmdrunner/cmdrunner.go

@@ -72,7 +72,7 @@ const (
 )
 
 var ColorNames = []string{"yellow", "blue", "pink", "mint", "cyan", "violet", "orange", "green", "red", "white"}
-var TabIcons = []string{"sparkle", "fire", "ghost", "cloud", "compass", "crown", "droplet", "graduation-cap", "heart", "file"}
+var TabIcons = []string{"square", "sparkle", "fire", "ghost", "cloud", "compass", "crown", "droplet", "graduation-cap", "heart", "file"}
 var RemoteColorNames = []string{"red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"}
 var RemoteSetArgs = []string{"alias", "connectmode", "key", "password", "autoinstall", "color"}
 
@@ -82,7 +82,7 @@ var GlobalCmds = []string{"session", "screen", "remote", "set", "client", "telem
 
 var SetVarNameMap map[string]string = map[string]string{
 	"tabcolor": "screen.tabcolor",
-	"tabicon": "screen.tabicon",
+	"tabicon":  "screen.tabicon",
 	"pterm":    "screen.pterm",
 	"anchor":   "screen.anchor",
 	"focus":    "screen.focus",