Unable to make icon inside button bigger

Issue

I’m trying to place an icon inside a button to select some files. Everything works fine except that that the size of the icon is way too small. The button in which the icon is placed has the right dimensions. This is what it looks like:
btn

btn2

btn3

How do I make my icon bigger?

Relevant html

          <ion-grid>
            <ion-row>
              <ion-col size"2">
                <ion-button
                  fill"clear"
                  (click)"popFileChooser()"
                  expand"full"
                  class"btnUpload"
                >
                  <input
                    (change)"onImageSelected($event)"
                    type"file"
                    accept"image/*"
                    multiple
                    #uploader
                    hidden
                  />
                  <ion-icon
                    class"btnIcon"
                    slot"icon-only"
                    color"secondary"
                    name"add-circle"
                  ></ion-icon>
                </ion-button>
              </ion-col>

              <ion-col size"10">
                <ion-row>
                  <ion-col size"auto">
                    <div class"imgWrap" *ngFor"let imgUrl of selectedImages">
                      <img class"imageThumbnail" [src]"imgUrl" />
                      <ion-icon
                        class"icon"
                        color"danger"
                        name"close-circle"
                      ></ion-icon>
                    </div>
                  </ion-col>
                </ion-row>
              </ion-col>
            </ion-row>
          </ion-grid>

And css

.imgWrap {
  position: relative;
  display: inline-block;
}

.imgWrap > img {
  width: 50px;
  height: 50px;
  padding: 5px;
}

.icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
}
.btnIcon {
  font-size: 100px;
  width: 100%;
}

Solution

It might be that your CSS is overwritten by ionic default CSS. So, use !important to add priority to your CSS , example:

.btnIcon {
  font-size: 100px !important;
  width: 100% !important;
}

Answered By – Ani

Leave a Comment