UPDATE 2. Went with the following solution:

<i class="fas fa-layer-plus fa-2x assignInventoryId"
    
   ng-if="currentItem.retailOption === 2 && currentIitem && currentIitem.inventId===0"
   ng-class="{'assignInventoryIdDisabled':currentIitem && currentIitem.setInventoryId}"
   title="{{currentIitem && currentIitem.setInventoryId? '@Messages.inventoryIdAssigned': '@Labels.assignInventoryId'}}"
   ng-click="assignInventoryId(currentIitem)"></i></label>

using these classes:

.assignInventoryId {
    color: #24AE5F;
    text-transform: none;
    vertical-align: middle;
    font-weight: normal;
    display: inline;
    cursor: pointer;    
}

.assignInventoryId i {
    font-size: 1.25em;
}
 .assignInventoryIdDisabled {
    cursor: not-allowed;
    pointer-events: none;
    color: #c0c0c0;
    background-color: #ffffff;
}

which seems to work well.

UPDATE. Found this
https://stackoverflow.com/questions/54176942/how-to-make-disabled-state-of-font-awesome-icon-button

I'm thinking I'll try to use ng-class attribute and if my icon should be enabled will use newSearch (may be I need a clone of this class to make it for this particular form) and otherwise will use something like newSearchDisabled class.

My current newSearch class is:

.newSearch {
    color: #24AE5F;
    text-transform: none;
    vertical-align: middle;
    font-weight: normal;
    display: inline;
    cursor: pointer;
}

    .newSearch i {
        font-size: 1.25em;
    }

Any suggestions of making the disable look here?


Hi everybody,

I have the following markup:

<label class="control-label"
                       ng-if="currentItem.retailOption === 2">@Labels.inventoryId: {{currentIitem && currentIitem.inventId!=0? currentIitem.inventId:'' }}
                <i class="fas fa-layer-plus fa-2x newSearch"
    
   ng-if="currentItem.retailOption === 2 && currentIitem && currentIitem.inventId===0"
   title="@Labels.assignInventoryId"
   ng-click="assignInventoryId(currentIitem)"></i></label>

I'm wondering if there is a way to make that icon disabled? I tried ng-disabled, but most likely this doesn't apply to the icon. I'm thinking of just changing the look of this icon, but this is also not clear to me as how to do this.

Thanks a lot in advance.