How to Make an Md-Button Smaller

Is it possible to make an md-button smaller?

Add the following to your styles:

.md-button {
    min-width: 1%;
}

Alternatively, use a custom class:

.md-button.md-small {
    min-width: 1%;
}

Or, in Angular Material 2:

.mat-button.mat-small {
    min-width: 1%;
}

md-button resize font size to fit button size

Here's an alternative solution to your problem - CodePen

The idea is to change the layout of the buttons according to screen size (responsive). I think it is more in line with the Angular Material way of doing things.

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <div layout-gt-xs="row" layout-xs="column" layout-align="center center">
    <md-button class="md-raised md-primary">Continue Adding</md-button>
    <md-button class="md-raised md-primary">Discard Changes</md-button>
    <md-button class="md-raised md-primary">Save Draft And Exit</md-button>
  </div>
</div>

Angular Material layout

How do I set mdButton text to lowercase?

Write your own class using css text-transform such as,

.tolowercase {
    text-transform: lowercase;
}

.tocapitalize {
    text-transform: capitalize;
}

And apply it to the input/button.

If you want htis behaviour throughout the system override the .md-button class in your css,

 .md-button {    
    text-transform: capitalize !important;/*For Lower case use lowercase*/
}

material2: properly changing of mat-mini-fab size and icon size

Alright, I found solution. It's really hard to change inherit properties in angular material 2 components. To do that in my situation I should do as answered here (already plused :D )

So in my code I made following changes in scss:

.my-fab {
     width: 20px;
     height: 20px;
     line-height: 14px;
     font-size: 14px;

     &::ng-deep .mat-button-wrapper{
         line-height: 14px;
         padding: 0;

          .mat-icon {
              font-size: 14px;
              padding-right: 4px;
              padding-top: 4px;
          }
    }
}

And now everything looking great. If you know better and proper way to change size of mat-fab-mini and icon inside it - answer here, if it work I'll mark it as correct answer. Otherwise I'll mark my answer as correct after 2 days.

Make smaller button in bootstrap

Bootstrap provides four button sizes:

The classes that define the different sizes are:

.btn-lg
.btn-md
.btn-sm
.btn-xs // Removed in Bootstrap 4+

The following example shows the code for different button sizes:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>

<div class="container">
  <h2>Button Sizes</h2>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary btn-md">Medium</button>    
  <button type="button" class="btn btn-primary btn-sm">Small</button>
</div>

Material button size responsive

You can use the property wrap of Flex:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

So when there is no more space for the html elements inside the div, it will re-order the elements in order all the elements get into the div.

In your case, you should do:

          <div fxLayout="row wrap" fxLayoutAlign="space-between">

            <mat-form-field>
              <mat-select [formControl]="filterchips" multiple placeholder="Filter by tags">
                <mat-select-trigger>
                  ...
                </mat-select-trigger>
                <mat-option *ngFor="..." [value]="..." (click)="...">
                  {{ ... }}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <div style="height: 70%; width: 70%;" style="display: block">
              <button [disabled]="isDisabled" mat-raised-button color="primary" (click)="..." >APPLY FILTER</button><br>
            </div>

          </div>

Check the Angular Flex Layout documentation about wrap:

https://github.com/angular/flex-layout/wiki/fxLayout-API#fxlayout--wrap