Switch between cloud icons according to dirty status

plugins/tiddlywiki/tiddlyweb/save-wiki-button.tid

@@ -10,7 +10,12 @@ $:/config/PageControlButtons/Visibility/$(listItem)$
 <$button popup=<<qualify "$:/state/popup/save-wiki">> tooltip="Status of synchronisation with server" aria-label="Server status" class=<<tv-config-toolbar-class>> selectedClass="tc-selected">
 	<span class="tc-dirty-indicator">
 		<$list filter="[<tv-config-toolbar-icons>match[yes]]">
-			{{$:/core/images/cloud-sync}}
+			<span class="tc-dirty-control tc-hide-when-dirty">
+				{{$:/core/images/cloud}}
+			</span>
+			<span class="tc-dirty-control tc-show-when-dirty">
+				{{$:/core/images/cloud-sync}}
+			</span>
 		</$list>
 		<$list filter="[<tv-config-toolbar-text>match[yes]]">
 			<span class="tc-btn-text"><$text text="Server status"/></span>

themes/tiddlywiki/vanilla/base.tid

@@ -2466,6 +2466,22 @@ body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg
 	color: <<colour dirty-indicator>>;
 }
 
+body.tc-dirty .tc-dirty-control {
+	display: inline;
+}
+
+body.tc-dirty .tc-dirty-control.tc-hide-when-dirty {
+	display: none;
+}
+
+body .tc-dirty-control.tc-show-when-dirty {
+	display: none;
+}
+
+body.tc-dirty .tc-dirty-control.tc-show-when-dirty {
+	display: inline;
+}
+
 /*
 ** File inputs
 */