Add setting for changing app icon style to symbolic

appIcons.js

@@ -63,6 +63,11 @@ let LABEL_GAP = 5;
 let MAX_INDICATORS = 4;
 export const DEFAULT_PADDING_SIZE = 4;
 
+let APPICON_STYLE = {
+    NORMAL: "NORMAL",
+    SYMBOLIC: "SYMBOLIC"
+}
+
 let DOT_STYLE = {
     DOTS: "DOTS",
     SQUARES: "SQUARES",
@@ -188,6 +193,7 @@ export const TaskbarAppIcon = GObject.registerClass({
 
         this._onAnimateAppiconHoverChanged();
         this._setAppIconPadding();
+        this._setAppIconStyle();
         this._showDots();
 
         this._focusWindowChangedId = global.display.connect('notify::focus-window', 
@@ -626,6 +632,15 @@ export const TaskbarAppIcon = GObject.registerClass({
         this._iconContainer.set_style('padding: ' + padding + 'px;');
     }
 
+    _setAppIconStyle() {
+        let symbolic_icon_style_name = 'symbolic-icon-style';
+        if (SETTINGS.get_string('appicon-style') === APPICON_STYLE.SYMBOLIC) {
+            this.add_style_class_name(symbolic_icon_style_name);
+        } else {
+            this.remove_style_class_name(symbolic_icon_style_name);
+        }
+    }
+
     popupMenu() {
         this._removeMenuTimeout();
         this.fake_release();

prefs.js

@@ -702,6 +702,12 @@ const Preferences = class {
             panel_size_scale.set_inverted(true);
         }
 
+        // App icon style option
+        this._builder.get_object('appicon_style_combo').set_active_id(this._settings.get_string('appicon-style'));
+        this._builder.get_object('appicon_style_combo').connect('changed', (widget) => {
+            this._settings.set_string('appicon-style', widget.get_active_id());
+        });
+
         // Dots Position option
         let dotPosition = this._settings.get_string('dot-position');
 

schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <schemalist gettext-domain="gnome-shell-extensions">
+  <enum id='org.gnome.shell.extensions.dash-to-panel.appiconStyle'>
+    <value value='0' nick='NORMAL'/>
+    <value value='1' nick='SYMBOLIC'/>
+  </enum>
   <enum id='org.gnome.shell.extensions.dash-to-panel.dotStyle'>
     <value value='0' nick='DOTS'/>
     <value value='1' nick='SQUARES'/>
@@ -119,6 +123,11 @@
       <summary>Dot position</summary>
       <description>Running indicators are shown on the Bottom or Top of the screen.</description>
     </key>
+    <key name="appicon-style" enum="org.gnome.shell.extensions.dash-to-panel.appiconStyle">
+      <default>'NORMAL'</default>
+      <summary>Style of Appicons</summary>
+      <description>Style of Appicons</description>
+    </key>
     <key name="dot-style-focused" enum="org.gnome.shell.extensions.dash-to-panel.dotStyle">
       <default>'METRO'</default>
       <summary>Style of the running indicator (focused)</summary>

stylesheet.css

@@ -154,3 +154,7 @@
       -progress-bar-border: rgba(0.9, 0.9, 0.9, 1);
     */
 }
+
+.symbolic-icon-style {
+    -st-icon-style: symbolic;
+}

taskbar.js

@@ -378,6 +378,7 @@ export const Taskbar = class extends EventEmitter {
             [
                 SETTINGS,
                 [
+                    'changed::appicon-style',
                     'changed::group-apps-use-launchers',
                     'changed::taskbar-locked'
                 ],

ui/SettingsStyle.ui

@@ -104,6 +104,20 @@
           </object>
         </child>
 
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Icon style</property>
+            <child>
+              <object class="GtkComboBoxText" id="appicon_style_combo">
+                <property name="valign">center</property>
+                <items>
+                  <item id="NORMAL" translatable="yes">Normal</item>
+                  <item id="SYMBOLIC" translatable="yes">Symbolic</item>
+                </items>
+              </object>
+            </child>
+          </object>
+        </child>
       </object>
     </child>