I have PrimeNg and Angular Materials buttons on the same td. I am attempting to resize my mat-buttons to match the size of my pButtons but they are not adjusting properly. Should I consider using a different type of button with my icon?
HTML
<button mat-mini-fab class="identify_icon"(click)="zebraIdentify()"><mat-icon svgIcon="identify_icon"></mat-icon> </button>
<button mat-mini-fab class="start_icon" (click)="zebraStartReads()"><mat-icon svgIcon="start_icon"></mat-icon> </button>
<button mat-mini-fab class="stop_icon" (click)="zebraStopReads()"><mat-icon svgIcon="stop_icon"></mat-icon> </button>
CSS
::ng-deep .mat-mini-fab {
height:3px !important;
padding-bottom: 40px !important;
border-radius: 9px !important;
/* font-size: 1em; */
transition: none !important;
box-shadow: none !important;
margin-right: 5px;
margin-left: 5px;
}
.identify_icon {
background-color: #59BFC9;
}
.start_icon {
background-color: #A2CB75;
}
.stop_icon {
background-color: #E01515;
}