Topic: Set far or fas programmatically

appresearcher free asked 4 years ago

We want to use one of your buttons...

<mdb-icon far icon="dot-circle"></mdb-icon>

but we want to set the far/fas value programmatically...

<mdb-icon {{getFarFas(row.value)}} icon="dot-circle"></mdb-icon>

There are four different conditions... for two we want far and for the other two we want fas…

  getFarFas(circleCode : number) {
    switch(circleCode) {
      case(0) : {
        return `far`;
      case(1) : {
        return `far`;
      case(2) : {
        return `fas`;
      case(3) : {
        return `fas`;

we are getting ERROR DOMException: "String contains an invalid character"

Konrad Stępień staff answered 4 years ago

Hi @appresearcher,

I think a better way to do this adds switch like HTML element.

Like this:

<div [ngSwitch]="getFarFas(row.value)">
  <mdb-icon *ngSwitchCase="0" fas icon="dot-circle"></mdb-icon>
  <mdb-icon *ngSwitchCase="1" fas icon="dot-circle"></mdb-icon>
  <mdb-icon *ngSwitchCase="2" far icon="dot-circle"></mdb-icon>
  <mdb-icon *ngSwitchCase="3" far icon="dot-circle"></mdb-icon>

Please test my code and tell me if is good for your project.

Best, Konrad.

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 Angular
  • MDB Version: 8.10.1
  • Device: Surface Pro
  • Browser: FireFox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No