Change chip code to allow custom close buttons

I think it would be useful to have the option of using any HTML element as a close button for a chip. With the current implementation, any of the Materialize icons that you put inside a chip automatically become a close button. This is handy if that’s all you want to do, but if you plan on having an icon in there for another reason, it’s highly annoying to have to modify things every time you want to do that. Also, you might want to have another element (an image, for example) close the tag. I have both of these use cases in my project, so I made a small modification to materialize.js to make it possible.

On line 3284, I changed it so that the line is this:

$(document).on('click.chip', '.chip .close-chip-btn', function (e) {

Rather than the original. This worked well for me (despite my limited knowledge of jQuery) so I figured I’d see if anyone else thought it was a good idea. If I’m not contributing this suggestion “properly” you’ll have to pardon me, I’m relatively new to GitHub so I’m “flying blind” here. Correct me if I did anything stupid. 😝

[Riari]

Good idea. I’d like to have more control over chip icons as I’m trying to use them like this:

It’s problematic having them close regardless of what the icon is.

[devmetal]

@TetianaP

Hi, i working on a project with materialize and react. I got the same issue when i try to make stateful this little component. I have to remove the close class also but this is the css code and its working for me:

<i
   onClick={() => onRemove(topic)}
   className="removable material-icons">
      close
</i>

i.removable {
  cursor: pointer;
  float: right;
  font-size: 16px;
  line-height: 32px;
  padding-left: 8px;
}

For now, i can hanle the active tags state in my component avoid the big errors 😃 Hope its help 😃

[Edited] The css from the materializecss library.