Icon color in button-icon

Is it possible to add a custom color (i.e. button-positive) to an icon button? I have this line:

<button class="button button-positive button-icon icon ion-ios-plus"></button>

However, giving the button any custom color causes it to disappear.

This is because you need to change button text color, not button background.

button-positive will change a background color and set a text color to white. Because this type of button uses text color it will blend with a background.

<button class="button button-icon icon ion-ios-plus custom-btn-color"></button>

.custom-btn-color {
    color: red;  
}

Right, but then when you click and unclick on the button, the color fades back to gray…

.custom-btn-color {
    color: red !important;  
}

I was just checking to see if there was a way of doing it without custom rules.

You can use the class positive by itself to change the color. For example:

<button class="button positive button-icon icon ion-ios-plus"></button>
1 Like

I have a question that extends from this question.

I have a “FAB-esque” button ala Material Design and when I click this “button”, an ionicModal launches.
Button:

<my-directive class="button button-icon assertive ion-plus-circled button-floating-action"></my-directive>

The problem came when I tried to add some shadow to this thing.
Box-shadow doesnt work because it creates a ghost-box. But text-shadow works. Here’s the custom css:

.button-floating-action {
    position: fixed;
    top: calc(90vh - 50px);
    right: 2vw;
    z-index: 999;
    text-shadow: 5px 5px 5px #888888;
}

The “+” isn’t white but transparent which means the shadow is seen through and looks funky.
Anyway to enforce the icon color vs the background color (white and red respectively)
The funky button-icon:

image

Thanks!

Did you find a solution to your problem with the shadow?

html:

<button class="button light ion-plus-round button-floating-action"></button>

css:

.button-floating-action {
    position: fixed;
    top: calc(90vh - 50px);
    right: 2vw;
    background-color: #ef473a;
    border-radius: 100px; 
    border-width: 0; 
    padding: 5px 12px 5px 12px;
    z-index: 999;
    box-shadow: 5px 5px 5px #888888;
}

got it working for me.
hope that helps!

@sakotturi thanks for sharing! I also got it working with a “Material-like” effect

<button class="button button-float" ng-click="createTransaction()">
      <i class="icon ion-plus"></i>
</button>

.button-float {
    background: #00A2E8 !important;
    color: white !important;
    z-index: 12 !important;
    position: absolute !important;
    bottom: 15px !important;
    right: 41%;
    width: 65px;
    height: 65px;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transition: 0.2s linear !important;
    transition: 0.2s linear !important;
    -webkit-transition-property: -webkit-transform, all !important;
    transition-property: transform, all !important;
}
.button-float:hover {
    -webkit-transform: translate3d(0, -1px, 0) !important;
    transform: translate3d(0, -1px, 0) !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4) !important;
    background: #0076A8 !important;
}
.button-float .icon:before {
    font-size: 34px;
}
1 Like