Topic: How to change default material select dropdown icon?

Sanches free asked 4 years ago

MDB PRO has a perfect material select but I would like to change default drop down icon

<div class="select-wrapper mdb-select md-form">
    <span class="caret">▼</span> // !
    // I would like to replace icon with other one from fontawesome

For this I've changed mdb.js file's code:

this.$dropdownIcon = this.options.defaultMaterialInput ? "" : $('<span class="caret">▼</span>')...

To the following:

this.$dropdownIcon = this.options.defaultMaterialInput ? "" : $('<span class="caret"><i class="fas fa-angle-down"></i></span>')...

But it's not changing the icon. How can I do that? Thanks beforehand!

P.S.I'm using mdb pro JQuery version 4.11

Grzegorz Bujański staff commented 4 years ago


Try this: this.$dropdownIcon = this.options.defaultMaterialInput ? "" : $('<span class="caret fas fa-angle-down"></span>');

Best, Grzegorz

Sanches free commented 4 years ago

Thank you! Worked =)

Grzegorz Bujański staff commented 4 years ago

No problem :) Best, Grzegorz.

How to do this in Angular MDBootstrap Pro?

Grzegorz Bujański staff commented 2 years ago

Do you mean MDB4 Angular or MDB5 Angular?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.11.0
  • Device: Desktop
  • Browser: chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No