AngularJS : md-button // Can I have 2 lines, and 2 font sizes in an ng-button, with an ng-click?

Question

I would like a button (in NodeRed, using the ui template), with inside the button, a heading in say font 10, then on a break, and a value with larger font size, but still in the button?

From what I can see I can only declare text size once for one button, is their any way?

Thank you smooth_atonal_sound ! I am now almost there, stil need help with ng-click, see the code below (adapted from Scargill), the ng-click directive does not work, how can I fix that?

<style>
  .filled { 
      height: 100% !important;
      padding: 0 !important;
      margin: 0 !important; }
      
  .nr-dashboard-template {
      padding: 0;
      margin: 0;
      overflow-x: hidden;
      overflow-y: hidden; }
      
  .rounded {
  border-radius: 7% 7% 7% 7%; }
   
   .fontbig {
  font-size: 28px;  }
   
   .fontsmall {
  font-size: 14px;  }
  
  .tolowercase {
    text-transform: lowercase;  }
    
  .tocapitalize {
    text-transform: capitalize; }

  .backgroundgreen {background: #73AD21;}
    
</style>



<script>
    $('.vibrate').on('click', function() {
      navigator.vibrate(100);
    });
     
    function restore_bg(x,y) {
                $(this).css("background-color", x);
        };
 
    $('.touched').on('mousedown', function() {
        var x= $(this).css("background-color");
        // $(this).css("background-color", "yellow");
        navigator.vibrate(80);
    });
</script>

<md-button 
    class="alerted filled touched rounded tocapitalize vibrate">
    <span style="fontsmall" {{msg.topic}}> <br><br>
    <span style="fontbig"{{msg.val}}>
    <ng-click="send({payload: 'test it...'})" >
</md-button>

Answer 1

Yes you can. You can style it like you would any other element.

`<md-button>
    <span class="size-1">Primary Size</p>
    <span class="size-2">Secondary Size</p>
</md-button>`

`.size-1 {
    font-size: 10px;
}
.size-2 {
    font-size: 12px;
}`