1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Custom Color Hamburger Icon - MDB Pro 6.2.6

gkondrach pro asked 5 years ago

I'd llike to apply custom color - #ff3333 or rgba(255,51,51,1.0) - to [iconBackground]. Current is [iconBackground]="['deep-orange', 'accent-3']" What is the correct notation for BOTH ... 1) apply directly in html, AND 2) specify in CSS then apply in html? Thanks. George

Damian Gemza staff answered 5 years ago

Dear George, It's super easy to achieve it. Just create your own class in which it will be defined the new background color for hamburger icon, and use it in iconBackground input. Please check the below code. .html: 
<mdb-navbar SideClass="navbar navbar-dark indigo" [containerInside]="false" [iconBackground]="['custom-hamburger-class']">
.scss: 
.custom-hamburger-class {

background-color: rgba(255,51,51,1.0);

}
Best Regards, Damian

Phillip Jacobs free answered 4 years ago

@Damian Gemza Best Answer Ever. Thank you!

How would i use the same approach but to change the color of the actual icon ?

Konrad Stępień staff commented 4 years ago

Hi @Phillip Jacobs,

Do you want to use something like this? https://mdbootstrap.com/docs/angular/content/icons-usage/#colors

You can set class for the icon.

Is the above example suggested by @Damian Gemza not working as it should?

gkondrach pro answered 5 years ago

That did it, Damian. Thank you for hanging in with me on my rookies mistake! Cheers, George

Damian Gemza staff answered 5 years ago

Dear gkondrach, Please add .hamburder-icon-amp in styles.scss, not in component stylesheet. Without adding this class to styles.scss, the hamburger won't change the background color. Best Regards, Damian

gkondrach pro answered 5 years ago

Damien, I thought 'super-easy' as well, and had coded it as you suggest, with different semantic but identical syntax. Then tried with your semantic. Neither work. Any stock color in used html works. .scss: 
.hamburger-icon-amp { background-color: rgba(255,51,51,1.0); }
.html: 
<mdb-navbar SideClass="navbar navbar-dark rgba-black-light fixed-top scrolling-navbar" [containerInside]="false" [iconBackground]="['hamburger-icon-amp']">
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No
Tags
hamburger color icon
About author
gkondrach
Pro User 170Support score
8Questions 13Answers 0Snippets