是否可以将 <md-select> 与 <md-icon> 集成？

Question

现在我正在使用来自google material design for angularJS。

我希望有图标来说明我的每个选项的作用，并且在选择时效果很好，但是在我选择了一个选项而不是图标之后，我得到了images/svg+xml。 （图比我说的更能说明情况）

我对这个指令的 HTML 是这样的：

<div layout="column">
  <div layout="row" layout-sm="column" layout-align="space-around center">
    <md-content md-theme="docs-dark" class="md-padding" flex>
      <div layout="column" flex>    
        <div layout layout-sm="column" flex>
          <md-input-container flex>
              <label>Name</label>
              <input required type="text" name="Name" ng-model="geo.geoDef.Name">
              <div ng-messages="geoDefForm.Name.$error">
              <div ng-message="required">Required.</div>
            </div>
          </md-input-container>
        </div>
      </div>
    </md-content>
  </div>
  
  <md-content class="md-padding">
    <div layout="row" layout-align="space-between center">
      <div layout="column" style="margin-right:20px">  
        <p>Start Point</p>
        <div layout layout-sm="column" style=" width:150px;">
          <md-input-container flex>
            <label>X</label>
            <input required type="number" step="any" name="StartPointX" ng-model="geo.geoDef.GeometryDefinition.StartPoint.X">
            <div ng-messages="geoDefForm.StartPointX.$error">
              <div ng-message="required">Required.</div>
              <div ng-message="number">Required.</div>
            </div>
          </md-input-container>
          <md-input-container flex>
            <label>Z</label>
            <input required type="number" step="any" name="StartPointZ" ng-model="geo.geoDef.GeometryDefinition.StartPoint.Z">
            <div ng-messages="geoDefForm.StartPointZ.$error">
              <div ng-message="required">Required.</div>
              <div ng-message="number">Required.</div>
            </div>
          </md-input-container>
        </div>
      </div>  
      <div style="margin: 20px 8px 0px 8px;">
        <md-checkbox ng-model="geo.geoDef.GeometryDefinition.MaterialOnRightSide" aria-label="MaterialOnRightSide">
          Material On Right Side
        </md-checkbox>
      </div>
    </div>  

    <div layout="row">
      <div layout="column">
        <p>Approach Definition</p>
        <div layout="row" layout-align="space-around end">
          <md-input-container style="width:100px;">
            <label>Length</label>
            <input required type="number" step="any" name="ApproachLength" ng-model="geo.geoDef.GeometryDefinition.ApproachDefinition.Length">
            <div ng-messages="geoDefForm.ApproachLength.$error">
              <div ng-message="required">Required.</div>
              <div ng-message="number">Required</div>
            </div>
          </md-input-container>
          <md-select style=" min-width:142px;" placeholder="CommandType" ng-model="geo.geoDef.GeometryDefinition.ApproachDefinition.TransitionStrategy">
            <md-option value="ZPositive"><md-icon md-svg-src="img/approach_horizontal.svg"></md-icon>Horizontal</md-option>
            <md-option value="XPositive"><md-icon md-svg-src="img/approach_vertical.svg"></md-icon>Vertical</md-option>
            <md-option value="Tangential"><md-icon md-svg-src="img/approach_tangential.svg"></md-icon>Tangential</md-option>
            <md-option value="Perpendicular"><md-icon md-svg-src="img/approach_perpendicular.svg"></md-icon>Perpendicular</md-option>
  <!--not yet implemented-->
            <!--<md-option value="TangentialRound">TangentialRound</md-option>-->
          </md-select>
        </div>    
      </div>
      
      <div layout="column">
        <p>Departure Definition</p>
        <div layout="row" layout-align="space-around end">
          <md-input-container style="width:100px;">
            <label>Length</label>
            <input required type="number" step="any" name="DepartureLength" ng-model="geo.geoDef.GeometryDefinition.DepartureDefinition.Length">
            <div ng-messages="geoDefForm.DepartureLength.$error">
              <div ng-message="required">Required.</div>
              <div ng-message="number">Required</div>
            </div>
          </md-input-container>
          <md-select style=" min-width:142px;" placeholder="CommandType" ng-model="geo.geoDef.GeometryDefinition.DepartureDefinition.TransitionStrategy">
            <md-option value="ZPositive"><md-icon md-svg-src="img/departure_horizontal.svg"></md-icon>Horizontal</md-option>
            <md-option value="XPositive"><md-icon md-svg-src="img/departure_vertical.svg"></md-icon>Vertical</md-option>
            <md-option value="Tangential"><md-icon md-svg-src="img/departure_tangential.svg"></md-icon>Tangential</md-option>
            <md-option value="Perpendicular"><md-icon md-svg-src="img/departure_perpendicular.svg"></md-icon>Perpendicular</md-option>
  <!--not yet implemented-->
            <!--<md-option value="TangentialRound">TangentialRound</md-option>-->
          </md-select>
        </div>    
      </div>
    </div>
  
  </md-content> 
</div>

我注意到image/svg+xml 位于标签内。我在想一种解决方案可能是一种搜索此文本以进行精确匹配并将其替换为null 不知何故使用角度过滤器的方法。

Answer 1

我发现解决此问题的解决方案是使用<img ng-src="{{geo.departure_horizontal}}" /> 而不是<md-icon>。它按我的意愿工作！