Material Symbols Picker Playground

Download Back To CSSScript.Com

A lightweight icon picker for Google's Material Symbols font with outlined, rounded, and sharp variants, tag-based search, and built-in light and dark themes.

Configurable Instance

Rebuild the picker with live options

Open the picker to test search and categories. The controls below rebuild one manual instance so every supported option is visible in a single place.

dashboard_customize Current value from getValue()
outlined / fill 0 Current variant and fill axis
wght 400 / GRAD 0 / opsz 24 Active font axis settings
Full Catalog Remote metadata with search tags and categories 

        


        

          
Live Preview

          
See one selection reused across UI patterns

          
The preview updates from the manual instance callback. This makes the component feel less isolated and closer to a real product surface.


          

            

              
            


            

              

                dashboard customize
                
Manual instance callback is active

              

              theme: dark
            


            

              

                
                Status chip
              

              

                
                Quick action
              

            


            

              

                
                Launch panel
              

            


            

              

                
                Library
              

              

                
                Board
              

              

                
                Canvas
              

            


            

              Applied CSS

              
            

          

        

      


      

        

          
Auto Init

          
Initialize multiple inputs from one selector

          
This section uses MaterialSymbolsPicker.init('[data-auto-picker]') and mirrors each selected icon into a compact form preview.


          

            

              
              
            

            

              
              
            

          


          

            

              
              send
            

            

              
              schedule
            

          


          
Both inputs stay as normal form fields underneath the picker wrapper, so external form code still receives input and change events.

        


        

          
Localized Subset

          
Custom strings with a local icon list

          
This instance skips remote fetching and uses a smaller icon subset passed through the public options. Labels remain English, but they are fully customized.


          

            
            
          


          

            

              
              
            

          


          

            

              
              Create palette
            

            
palette

          


          
This covers icons, strings, and a separate onChange callback path without depending on external metadata.