Search code examples
javascriptmaterialize

How to customize materialize chips when created?

I am using materialize css framework and I am currently using chips component.

Code is below

 <div class="chips chips-initial"></div>

Now as per the documentation guide I am initializing chip object.

<script>
 $('.chips-initial').material_chip({
                data: [{
                    tag: 'Apple',
                }, {
                    tag: 'Microsoft',
                }, {
                    tag: 'Google',
                }],
 });
</script>

Everything works fine but I want to know how we can show close button or custom image (contact-chip) when chip is created in textbox.Currently it shows 'close' text to close that chip.

Solution

  • Have you included Material Icons?

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">