Как изменить цвет значка md в Angular Материал?

Ответ 1

Для людей, пытающихся раскрасить их значок md, я обнаружил, что у меня была такая же проблема, используя Angular 1.3.x и Angular Материал 0.8.x.

Я исправил проблему с помощью редактирования моих SVG файлов и удаления атрибута "fill" , который переопределял любой унаследованный цвет.

После удаления этого атрибута "fill" в каждом файле SVG я мог бы правильно выбрать цвет, который я хотел назначить значку, благодаря CSS как указано Jason Aunkst.

Ответ 2

Я нахожусь на angular -материале 0.8, и я просто добавил

    style="color:white;font:bold;" 

в элемент md-icon.

Ответ 3

SVG вложен под иконкой ng, поэтому вам просто нужно добавить это в свой CSS и добавить fill: red; к стилю на ng-значке.

md-icon svg {
  fill: inherit;
}

Ответ 4

Единственное, что я получил, это работать с таблицами стилей.

md-icon {
  svg {
    path {
      fill: #ffffff;
    }
  }
}

Ответ 5

Использую это в CSS:

.my-icon svg
{
   fill : #fff;
}

И в HTML:

<ng-md-icon icon="search" class="my-icon"></ng-md-icon>

Прекрасно работает!

Ответ 6

Вы должны сделать это, добавив "fill: white" в стиль значка.

<md-icon class="ng-scope ng-isolate-scope md-default-theme" style="height: 14px; width: 14px; fill:white" md-svg-src="img/material-icons/core/arrow-forward.svg"></md-icon>

Ответ 7

Добавьте это в свой css:

svg {
    fill: inherit;
}

Теперь svg наследует атрибут fill вашего md-значка

<md-icon style="fill: red;" md-svg-src='/img/ic_menu_white_24px.svg'></md-icon>

Ответ 8

У меня была аналогичная проблема при попытке изменить цвет значка svg по умолчанию. Для тех, кто испытывает подобную проблему, убедитесь, что вы проверили версию angular -материала, которую вы в настоящее время используете. В настоящее время я использую angular -material "0.7.1" , и это очень важно.

ПРИМЕЧАНИЕ: с моей текущей версией angular -материала (0.7.1), директива <mdIcon></mdIcon> проверяет, не определено ли attr.Icon во время postLinking compileFunction. С этой реализацией, чтобы ссылаться на ваши файлы значков svg, вы просто добавляете атрибут значок в директиву элемента <mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon>. Обратите внимание, что в более ранней версии angular -материала вы можете использовать md-src-svg для ссылки на ваши файлы svg, это больше не относится к версии 0.7.1.

Итак, если вы использовали 0.7.1 и следуя инструкциям выше, вы должны правильно отобразить изображение svg, теперь пришло время изменить фоновый цвет используемого вами svg.

Raw svg file перед любой модификацией:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
 height="24px" viewBox="0 0 24 24">
<g>
    <path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>

В вашем проекте должна быть папка, в которой вы сохраняете все свои значки svg. В моем случае у меня есть папка с иконками, в которой хранятся все мои значки svg. Пример svg файла выше - это немодифицированный значок svg, где я получил его из https://github.com/google/material-design-icons. (По умолчанию его рендеринг как черный файл svg)

Чтобы изменить файл svg по умолчанию, вы просто добавили атрибут fill в ваш исходный файл svg. См. измененный файл svg:

<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />

Я просто добавил fill = "green" файл svg файла пути, и теперь мой значок svg отображается как цвет зеленый, а не черный по умолчанию. Я знаю, что некоторые из вас, ребята, могут использовать другую версию angular -материала, но механизм изменения цвета svg по умолчанию должен применяться одинаково. Надеюсь, это поможет вам решить ваши проблемы, спасибо!

Ответ 9

Проблема связана с загруженными SVG из значков Google Design, поскольку они переопределяют атрибут fill в корневом каталоге svg. Сравните источник просмотра SVG в Google Design с используемый в примере.

Решение:: переопределить заливку в css.

md-icon svg {
    fill: currentColor;
}

Ответ 10

Один из способов сделать это - установить настраиваемый селектор классов.

HTML:

<md-button class="md-fab mybtnstyle">
  <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>

CSS

.md-button.md-fab.mybtnstyle {
  background-color: blue;
}

.md-button.md-fab.mybtnstyle:hover {
  background-color: red;
}

Codepen здесь: http://codepen.io/anon/pen/pjxxgx

Ответ 11

Самый простой выход

Теперь нет необходимости изменять свойство svg или fill.

Просто добавьте свойство цвета !important в md-icon в CSS:

md-icon {
  color: #FFF !important;
}

Ответ 12

У меня была аналогичная проблема, мне нужно было изменить цвет SVG с помощью CSS, но мне также нужно было сохранить исходный цвет SVG (например, fill = "# fff" ), когда не был добавлен CSS.

Я улучшил подход Джейсона Аункста, чтобы заставить его работать. Здесь решение:

md-icon[style*="color:"] svg [fill] {
    fill: inherit;
}

Этот класс установит любой дочерний элемент svg с атрибутом fill, чтобы наследовать значение цвета, пока svg является дочерним элементом элемента md-icon, который содержит атрибут style с значением цвета.

Он будет работать только на SVG, который использует только один цвет заливки. Отрегулируйте по мере необходимости, надейтесь, что это поможет!