如何在 ng2-material 对话框中添加图标？

Question

我有一个对话框，当有事情发生时我会显示，这是它的代码：

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

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

现在我有一些表情符号图标，我想在框被触发时添加到它。

因此：

到这里：

Answer 1

编辑：这适用于 Angular Material 1，但 AM2 的概念应该相同。

您必须使用自定义对话框来实现 - CodePen

标记

<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);
  };
}