是否可以将<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替换为angular的过滤器。

Answer 1

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