Wie fügt man dem Dialogfeld ng2-material ein Symbol hinzu?

Question

Ich habe ein Dialogfeld, präsentiert im, wenn etwas passiert, das ist der Code dafür ist:

public showMessageDialog(message) { 
    let config = new MdDialogConfig() 
     .title('Dialog Box:') 
     .textContent(message) 
     .ok('Got it') .; 

    this.dialog.open(MdDialogBasic, this.element, config); 
    } 

Jetzt habe ich einige emoji Symbol ich es hinzufügen möchten, wenn die Box ausgelöst wird.

so von dieser:

dazu:

Answer 1

Edit: Die für Angular Material 1, aber das Konzept sollte für AM2 sein.

Sie würden einen benutzerdefinierten Dialog verwenden, um das zu erreichen - CodePen

Markup

<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp"> 
    <div class="dialog-demo-content" layout="row" layout-wrap="" layout-margin="" layout-align="center"> 
    <md-button class="md-primary md-raised" ng-click="showAdvanced($event)"> 
     Custom Dialog 
    </md-button> 

    <script type="text/ng-template" id="dialog1.tmpl.html"><md-dialog aria-label="Mango (Fruit)" ng-cloak> 
     <md-dialog> 
      <form> 
      <md-dialog-content> 
       <div class="md-dialog-content"> 
       <p class="md-title"> Dialog Box: </p> 
       <div> 
       <p> Some message </p> 
       <img style="width:100px" src="..."> 
       </div> 
       </div> 
      </md-dialog-content> 

      <md-dialog-actions layout="row"> 
       <span flex></span> 
       <md-button class="md-primary" ng-click="answer('Got it')"> 
       Got it 
       </md-button> 
      </md-dialog-actions> 
      </form> 
     </md-dialog> 
    </script> 
</div> 

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 

.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) { 
    $scope.status = ' '; 
    $scope.customFullscreen = false; 

    $scope.showAdvanced = function(ev) { 
    var useFullScreen = false; 

    $mdDialog.show({ 
     controller: DialogController, 
     templateUrl: 'dialog1.tmpl.html', 
     parent: angular.element(document.body), 
     targetEvent: ev, 
     clickOutsideToClose:true, 
     fullscreen: useFullScreen 
    }) 
    .then(function(answer) { 
     $scope.status = answer; 
    }, function() { 
     $scope.status = 'You cancelled the dialog.'; 
    }); 
    }; 

}); 

function DialogController($scope, $mdDialog) { 
    $scope.hide = function() { 
    $mdDialog.hide(); 
    }; 

    $scope.cancel = function() { 
    $mdDialog.cancel(); 
    }; 

    $scope.answer = function(answer) { 
    $mdDialog.hide(answer); 
    }; 
}