Finalize MaterialSymbol Component

Author: kevzlou7979

gwt-material/src/main/java/gwt/material/design/client/base/HasSymbols.java

@@ -1,5 +1,6 @@
 package gwt.material.design.client.base;
 
+import gwt.material.design.client.constants.Color;
 import gwt.material.design.client.constants.SymbolType;
 
 public interface HasSymbols {
@@ -8,6 +9,10 @@ public interface HasSymbols {
 
     void setSymbol(String symbol);
 
+    void setColor(Color color);
+
+    void setSymbolSize(String size);
+
     void setFilled(boolean filled);
 
     void setWeight(int weight);

gwt-material/src/main/java/gwt/material/design/client/constants/SymbolType.java

@@ -4,21 +4,27 @@
 
 public enum SymbolType implements CssType {
 
-    OUTLINED("material-symbols-outlined"),
-    ROUNDED("material-symbols-rounded"),
-    SHARP("material-symbols-sharp");
+    OUTLINED("material-symbols-outlined", "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"),
+    ROUNDED("material-symbols-rounded", "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"),
+    SHARP("material-symbols-sharp", "https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200");
 
     protected String name;
+    protected String cssLink;
 
-    SymbolType(String name) {
+    SymbolType(String name, String cssLink) {
         this.name = name;
+        this.cssLink = cssLink;
     }
 
     @Override
     public String getCssName() {
         return name;
     }
 
+    public String getCssLink() {
+        return cssLink;
+    }
+
     public static SymbolType fromStyleName(final String styleName) {
         return EnumHelper.fromStyleName(styleName, SymbolType.class, OUTLINED);
     }

gwt-material/src/main/java/gwt/material/design/client/ui/MaterialSymbol.java

@@ -4,26 +4,28 @@
 import com.google.gwt.dom.client.LinkElement;
 import gwt.material.design.client.base.HasSymbols;
 import gwt.material.design.client.base.MaterialWidget;
+import gwt.material.design.client.base.mixin.ColorsMixin;
 import gwt.material.design.client.base.mixin.CssNameMixin;
+import gwt.material.design.client.constants.Color;
 import gwt.material.design.client.constants.SymbolType;
 import gwt.material.design.client.ui.html.Span;
 
 public class MaterialSymbol extends MaterialWidget implements HasSymbols {
 
-    static {
-        LinkElement linkElement = Document.get().createLinkElement();
-        linkElement.setRel("stylesheet");
-        linkElement.setHref("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200");
-        body().append(linkElement);
-    }
-
     protected Span span = new Span();
+    protected static LinkElement linkElement = Document.get().createLinkElement();
     protected CssNameMixin<Span, SymbolType> symbolTypeMixin;
+    protected ColorsMixin<MaterialSymbol> symbolColorsMixin;
     protected boolean filled;
     protected int weight = 400;
     protected int grade = 0;
     protected int opticalSize = 48;
 
+    static {
+        linkElement.setRel("stylesheet");
+        body().append(linkElement);
+    }
+
     public MaterialSymbol() {
         super(Document.get().createElement("div"));
         setType(SymbolType.OUTLINED);
@@ -42,9 +44,20 @@ public void setSymbol(String symbol) {
         span.getElement().setInnerText(symbol);
     }
 
+    @Override
+    public void setColor(Color color) {
+        getSymbolColorsMixin().setTextColor(color);
+    }
+
+    @Override
+    public void setSymbolSize(String size) {
+        span.getElement().getStyle().setProperty("fontSize", size);
+    }
+
     @Override
     public void setType(SymbolType type) {
         getSymbolTypeMixin().setCssName(type);
+        linkElement.setHref(type.getCssLink());
     }
 
     @Override
@@ -68,7 +81,14 @@ public void setOpticalSize(int size) {
     }
 
     protected void load() {
-        getElement().setAttribute("style", "font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;");
+        span.getElement().getStyle().setProperty("fontVariationSettings", "'FILL' " + (filled ? 1 : 0) + ", 'wght' " + weight + ", 'GRAD' " + grade + ", 'opsz' " + opticalSize);
+    }
+
+    public ColorsMixin<MaterialSymbol> getSymbolColorsMixin() {
+        if (symbolColorsMixin == null) {
+            symbolColorsMixin = new ColorsMixin<>(this);
+        }
+        return symbolColorsMixin;
     }
 
     public CssNameMixin<Span, SymbolType> getSymbolTypeMixin() {